Now that we've explored a few Client Sided Rendering frameworks, its time to get into the Server Side Rendering space.
What is Server Side Rendering (SSR)
Server-side rendering (SSR) is the process of rendering web pages on the server and sending them to the client as fully-formed HTML pages, rather than sending just the JavaScript, CSS, and other assets and having the client render the page.
Advantages and Disadvantages
Advantages
Better initial page load time and perceived performance, as the client receives a fully-formed HTML page from the server instead of having to wait for JavaScript to download and execute before rendering the page.
Better SEO and social media integration, as search engines and social media crawlers can see the fully-formed HTML page and index it correctly.
Improved accessibility, as the fully-formed HTML page can be rendered by text-only browsers and assistive technologies.
Disadvantages
Higher server load, as the server has to generate the HTML content for each request, which can be resource-intensive.
Higher time to first byte (TTFB), as the server has to process the request and generate the HTML before sending it to the client.
Limited interactivity, as most of the page logic and user interactions are handled on the server side, which can limit the types of interactive features that can be implemented.
Now that we know what Server Side Frameworks are, I'll start sharing about my experience building our Github repositories app in two of the latest meta SSR Frameworks.
The first one in this list is SvelteKit. Svelte has been under my radar for a long time as it constantly showed up as one of the top two frameworks in the State Of JS Survey that happens every year.
Svelte
Svelte is a modern JavaScript framework for building web applications. It takes a different approach to building applications compared to traditional frameworks like React, Angular, and Vue.
Instead of building applications using a virtual DOM (which is the approach used by most modern frameworks), Svelte compiles your application code into highly efficient imperative code that directly manipulates the DOM.
This can result in smaller, faster applications that consume fewer resources and can provide a smoother user experience.
SvelteKit
SvelteKit is the Server Side rendering framework that is built on top of Svelte. I couldn't put it any better than how they've put it in their official website.
SvelteKit is the framework that grows with you! Start simple and add new features as they come
I was greeted with a very basic app with typescript and Vite built-in making it very easy for me to get going with building the app even though I had no experience working with the framework before
Developer Experience
This takes us straight into the developer experience and learning curve.
Svelte and SvelteKit are both very easy to learn. In fact, I was able to build the application from scratch using Svelte in just 45 minutes, which was faster than any of the other 5 frameworks I'm currently experimenting with.
Their documentation and REPL along with the interactive tutorial made me understand the framework super quick.
Application
SvelteKit comes with built in file based routing and a store which made it extremely easy to implement the app. I didn't have to download any external package in the project and Svelte was able to house the entire application with its inbuilt features.
Native integration with typescript and Vite also increased the developer experience by a lot.
Conclusion
SvelteKit is a really good SSR framework built on top of Svelte which is very quick to pickup and still has a lot more to offer. The framework grows with the app and will easily be my go-to framework for any of the applications that I'll be building in the upcoming days.
Checkout the Application here
Top comments (0)