Elder.js was built as a static site generator (SSG) but was developed into a full server side rendering (SSR) framework.
If you're wondering if Elder.js will support your use case we have 1 good rule to help you make that decision:
Are you looking to build a "modern" app with client side routing? If so, Elder.js IS NOT the right solution for you.
We like to think that Elder.js is great a building websites, regardless of whether they are statically generated or server rendered.
If you're building an "App" you can definitely use Elder.js but if you want client side routing make sure to check out SvelteKit.
The Elder.js project was born out of the system that powers ElderGuide.com. When building Elder Guide we searched high and low for a blazing fast static site generator that we could use with Svelte, but couldn't find anything that fit our needs.
After 6 months of building a great system, we decided to polish it a bit more and open it up into a project others could use.
Today, Elder.js has two main functions: one as a static site generator and the other as express middleware where it acts as a Svelte framework that supports server side rendering (SSR) and partial hydration. (You're probably viewing this page on the express middleware version.)
All of this said, we highly recommend Elder.js as a tool for building statically generated sites that can be cheaply and securely hosted on S3, Netlify, or Cloudflare.
These include:
To see static export in action run npm run build in your terminal. We think you'll be surprised how fast it builds. :)
If you are looking to use Elder.js as an express middleware make sure to look at the middleware hook as it should empower you to do anything you'd need to do with Express.
Like most frameworks Elder.js has a learning curve but we've tried to keep it as minimal as possible to achieve common customizations while still making use of advanced Elder.js features as approachable as possible.
The largest learning curve for most people is learning how to use hooks and shortcodes to achieve their goals.
If you are able to understand the routes found in this template then you shouldn't have too many issues.
How Elder compares to SvelteKit is a very common question. The key distinction is that Elder.js is designed with SEO in mind and offers tools to help make building large static sites easier.
react, vue, angular and svelte struggle with SEO even if they are server side rendered (SSR). In our experience partial hydration results in less indexation issues for Google much like jquery sites of yester-year. This is why Elder.js has gone all-in on partial hydration. We believe it is a competitive SEO advantage. (Google has a great guide on hydration.)shortcodes which allow you to future proof your content.hooks allowing your team to encapsulate much of a site's complexity in one place. These hooks also empower a growing ecosystem of plugins.In short, Elder.js is purpose built to run flagship SEO sites with 10-100k pages.
SvelteKit is not out of beta but currently does not support Partial Hydration - you have to opt in/out of JS on a per-page basis, instead of per-component.
SvelteKit uses Vite and HMR which result in a bit better developer experience.
A Very Complex Rollup Config
To be candid, Elder.js's biggest drawback is it's very complex Rollup configuration that is internalized into Elder.js which makes it hard to edit for custom needs.
As of v1.5, you can also use npm run esbuild to use the esbuild bundler which is much faster.
A Very Strict Folder Structure
Because of Elder.js' complex Rollup config it needs to follow a pretty specific file structure. This project matches that file structure and you can learn more about it on the getting started page.
No Live Reload / HMR support (Yet)
We realize developer experience is crucial and see potential in using esbuild to speed up our local development environment. While we'd love to use snowpack or vite due to our complex client and SSR bundling needs we need something with a bit more control.