How To Choose A Web Rendering Method

There are four ways to display webpages: pre-rendering, server-side rendering, client-side rendering, and isomorphic rendering. Each method has its pros and cons and should be carefully implemented according to your specific use case.

If search engine optimization is primordial for your application, client-side rendering is out of the equation. Client-side rendering is more suited to back-office applications or dashboards that are only accessible to authenticated users, for example.

Choosing between pre-rendering, server-side rendering, and isomorphic rendering comes down to the kind of features you’ll be implementing and how fast the application data is going to change.

Pre-rendering lets the web server build static files before any incoming request. It’s the most performant way for end-users to access webpages since no action is required at run time: the webserver just locates the corresponding web directory/index file and sends it. This is especially great for slow-changing websites like blogs, ebooks, and personal websites.

When the data changes regularly (several times a day), pre-rendering becomes inefficient and we need the server to build the content at run time. Server-side rendering is the most traditional approach since the invention of the web, but not the most scalable. Optimized server-side rendering leverages caching mechanisms to make up for the loss in performance.

Isomorphic-rendering is used when you want the best of all worlds. You can pre-render the content (e.g Gatsby framework) or use a web server to generate dynamic content (e.g any modern multi-purpose web framework), and leverage hydration mechanisms to create a stellar UX. It’s also the most complicated method to implement since it usually requires code duplication between the front-end and the back-end.

From my experience, complex applications often require to switch between different rendering technologies whenever you can. Sticking to one paradigm is easier during development time, but it can significantly impact the performance of your app. My advice: use a multi-purpose web framework and create your own boilerplate.