5

Server-side Rendering – Back to the Roots?

 1 year ago
source link: https://devm.io/javascript/server-side-rendering-javascript
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Hitchhiking through the JavaScript jungle

Server-side Rendering – Back to the Roots?

27. Oct 2022


When it comes to modern web development, there's no avoiding big single page application frameworks like Angular, React, Vue, or even Svelte. The big advantage of this kind of web application is that, ideally, they feel like desktop applications to users. So there are no loading times between individual views.

But the biggest disadvantage of these applications is their initial loading time. This is because the current view and its data needs to be loaded, as well as the complete application with all views. Additionally, there’s a framework used in every case. None of these are really lightweight. The kind of application’s lifecycle has another peculiarity. Normally, the framework renders its components in an empty state and then communicates with a server interface that provides data for the display. Once the data is available in the frontend, the corresponding components are re-rendered.

But what does the process look like from the users' point of view? I enter the application’s address in the browser and hit confirm. First, I see a white page. Wait, then the application’s frame, but no data. Then, suddenly, everything is there. Good user experience works differently. Of course, I can trick it with the browser cache or a service worker. But that doesn’t help with the application’s initial load. However, the second and all loading processes afterwards will be significantly faster. Another trick you can use to speed up the initial loading process is Lazy Loading. You don’t load all of the potential components in your application at the beginning, only those you really need. This makes a smaller bundle size and therefore, faster loading times. All of this is merely cosmetic, attempting to fool users into thinking it’s performance. But not everything needs to be fake. Modern frameworks contain features that allow completely different concepts. We’re talking about server-side rendering and static site generation. Let’s take a short look at both concepts and ask ourselves in secret if we’d rather go back to good old PHP for rendering dynamic websites on the server side.

Server-side Rendering

Server-side rendering, commonly abbreviated as SSR, refers to a workflow where a single page view of an application is rendered on the server side and delivered to the browser. Of course, for this to work, you need a corresponding infrastructure. The frontend frameworks are either implemented in JavaScript or TypeScript and are, more or less, tightly integrated with the browser...


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK