So.
I've been using Next.js to build websites for my clients, and the experience has been incredibly smooth, thanks to their page pre-rendering techniques.
What is Pre-rendering? 🤔
Pre-rendering involves generating the HTML file before it is actually called into action.
What does it do? ⚙️
This makes your website load considerably quicker as it’s serving static HTML files which are ready on stand by.
So what does this mean? 🧠
Fast website = Users are more likely to stay and interact with your site if it loads quickly
So what is Static site generation (SSG)? 📦
Static site generation (SSG) is where the HTML files on your website are prepared ready to be used before the user even clicks onto that page.
Meaning this page could even be used offline if the website has been rendered completely.
Static site generation (SSG) is perfect for projects like blogs, landing pages and portfolios.
Why?
Because the data on these page aren't changed frequently. Meaning that the static data which is preloaded does not become outdated.
The positives of Static site generation✅:
Fast load times
- With HTML file ready on standby, this reduces the wait time for content to be loaded.
SEO benefits
- Search engine optimisation is a process of allowing your website to rank higher on a given search engine. With faster load times, HTML pages which are easy to crawl through. SSG makes it easier for you website to have a better SEO performance.
As awesome as SSG sounds it does come with its own set of drawbacks:
Negatives of Static site generation ❌:
Limited dynamic content
If you’re site needs frequently changing dynamic content SSG may not be the best option
For large pages like e-commerce website managing so much static data can be burdensome to manage and can slow down the website performance.
SSG is the perfect solution if your business requirement hold SEO and website performance in high regards.
But I have dynamic data? ⚡️
However if your building a website like an e-commerce site or a website that interacts with a database then you would need to apply a technique called Server side rendering (SSR)
How does it work? 🤔
In SSR, when a user makes a request to view a particular web page, the server dynamically generates the HTML content for that page on the server itself, based on the specific user's request.
Positives of Server side rendering ✅:
Dynamic content on demand
- SSR allows you to create pages with dynamic data limiting the need for you to maintain the website.
Enhanced security
- SSR is perfect for providing security for sensitive data you may be using on your website, reducing the risk exposing critical information on the client side.
Better Initial Load Performance:
- While not as fast as purely static sites, SSG still offers improved initial load performance compared to client-side rendering approaches. Users get a meaningful, partially rendered page quickly while additional content is loaded.
Just like SSR, comes with its own unique set of drawback:
Negatives of SSR ❌:
Slower loading pages:
As the site is loading data from the server, as the server must retrieve the data then generate the HTML file before serving the page to the website.
SEO challenges:
Although SEO can still be as effective as SSG, extra steps need to be taken when using SSR to make sure your SEO is implemented correctly such as:
Structured dynamic URLs
Optimise images and other media files to reduce overall page load time.
SSR is perfect for websites which are constantly changing like an E-commerce website.