You have the starter template of Elder.js running. So what is next? This guide will help you explore the project.
You have the starter template of Elder.js running. So what is next? This guide will help you explore the project.
Building a simple blog with Elder.js is easy. Just toss a few markdown files in a folder of this project!
What types of sites can you build with Elder.js? Can I use it for ______? Find out here.
This is my post
This is my post 2
This example project is made up of 5 routes; you can find them by looking within the ./src/routes/ folder. They are:
The goal in showing off these 3 routes is to give you enough of an example to see how a site is built with Elder.js (but one that isn't too complex to overwhelm you).
If you ran npm start to see this page this is the same as npm run dev which will:
npm run build: will statically generate this same site so that it can be deployed with a static site
host such as Netlify, Cloudflare Pages, Vercel, or S3.
npm run serve: will start the server in production SSR mode which can be used with cluster mode or
PM2 to host Elder.js in a SSR fashion.
Svelte.js shines at bringing interactivity to otherwise static websites.
By default, Elder.js statically renders Svelte components, only mounting them in the browser when it encounters a
Svelte component which includes the
hydrate-client={} prop.
This means that if a page doesn't need dynamic JS it will have 0KB of JS code resulting in faster loading, lighter weight websites.
The clock on this page is an example of a component that has been hydrated on the client.
This approach makes it easy to build SEO friendly websites, with Svelte for interactivity when needed.
By default all hydrated components are lazy loaded with an intersection observer, but you can have full control over how hydration is handled via several different hydration options.