Leveraging Server-side Rendering for Enhanced Web Performance and SEO By Trust Jamin 

Trust Jamin - Software Developer and Developer Advocate - Co-founder, Community Leads Africa - Community Manager @0xJamin 

What is Rendering in the first place? 

What is Rendering? Rendering refers to the process where a web browser takes the code (HTML, CSS, JavaScript) of a website and displays it as a visible web page to your users. 

What is Client-side Rendering (CSR)? 

What is Client-side Rendering (CSR)? Client-side rendering(CSR) is a rendering mode where the request to access a page is processed by the browser, using only the JavaScript file to generate the HTML content. This is a modern rendering method supported by most modern frontend libraries like React and Vue that doesn’t involve receiving of an entire HTML page from the server 

No content

export default function Home() { useEffect(() => { const fetchProducts = async () => { const res = await fetch('https://fakestoreapi.com/products') const data = await res.json(); setProducts(data) } return () => { fetchProducts() } }, []) return ( <> Hello World from SSR Website

All Products

{data && data.map((product) => ( ) )} ) 

No content

What is Server-side Rendering (SSR)? 

What is Server-side Rendering (SSR)? Server-side rendering(SSR) as the name implies is the process where the server generates the complete HTML content for a webpage and sends it to the client or browser. This implies that the server takes care of rendering or creating the webpage before it is delivered to the user. 

No content

export default function Home({ data }: {data: Product[]}) { return ( <> Hello World from SSR Website

All Products

{data && data.map((product) => ( ) )} ) } // This gets called on every request export async function getServerSideProps() { // Fetch data from external API const res = await fetch('https://fakestoreapi.com/products') const data = await res.json(); // Pass data to the page via props return { props: { data } } } 

No content

Benefits of SSR: ● Improved SEO: SSR helps search engine crawlers easily read and index the contents of your website 

Benefits of SSR: ● Improved SEO: SSR helps search engine crawlers easily read and index the contents of your website ● Faster Web Performance: With SSR less javascript is sent to the client, the server sends already rendered HTML to the browser, so users see content quicker. 

Benefits of SSR: ● Improved SEO: SSR helps search engine crawlers easily read and index the contents of your website ● Faster Web Performance: With SSR less javascript is sent to the client, the server sends already rendered HTML to the browser, so users see content quicker. ● Security: SSR can offer better protection against certain types of attacks, like XSS (Cross-Site Scripting), as the server pre-renders the content and sends it securely to the client. 

Benefits of SSR: ● Improved SEO: SSR helps search engine crawlers easily read and index the contents of your website. Search engines use page loading speed as a ranking factor, so a faster loading webpage is more likely to rank higher in search results. ● Faster Web Performance: With SSR less javascript is sent to the client, the server sends already rendered HTML to the browser, so users see content quicker. ● Security: SSR can offer better protection against certain types of attacks, like XSS (Cross-Site Scripting), as the server pre-renders the content and sends it securely to the client. ● Improved Social Sharing and Optimization: When sharing links on social media platforms, having pre-rendered content allows for better previews (richer snippets), increasing the chances of users engaging with shared content 

Downsides of SSR: ● Server Cost and Dependency: Since SSR depends on the server, your entire site might become unavailable if something happens to your server. High server load can be an issue sometimes too. 

Downsides of SSR: ● Server Cost and Dependency: Since SSR depends on the server, your entire site might become unavailable if something happens to your server. High server load can be an issue sometimes too. ● Complexity: Implementing SSR might add complexity to the development process. It requires a different architecture and setup compared to client-side rendering, which can increase development time and complexity. 

Downsides of SSR: ● Server Cost and Dependency: Since SSR depends on the server, your entire site might become unavailable if something happens to your server. High server load can be an issue sometimes too. ● Complexity: Implementing SSR might add complexity to the development process. It requires a different architecture and setup compared to client-side rendering, which can increase development time and complexity. ● Slower Navigation on Other Pages: Navigating between pages may be slower as it requires making server requests. 

Downsides of SSR: ● Server Cost and Dependency: Since SSR depends on the server, your entire site might become unavailable if something happens to your server. High server load can be an issue sometimes too. ● Complexity: Implementing SSR might add complexity to the development process. It requires a different architecture and setup compared to client-side rendering, which can increase development time and complexity. ● Slower Navigation on Other Pages: Navigating between pages may be slower as it requires making server requests. ● Limited Client-Side Interactivity: You may need more additional client-side JavaScript for adding more interactivity to your application. 

What is SEO? 

What is SEO? Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines (Google, Bing, or Yahoo). 

Some areas SSR helps you improve in SEO 1. Crawlability Your website becomes more accessible to search engine bots and crawlers, enabling them to index its content more effectively. 

Some areas SSR helps you improve in SEO 2. Reduced duplication & Content Accessibility SSR ensures that the content is available directly in the HTML response sent by the server, making it immediately visible to search engines. 

Some areas SSR helps you improve in SEO 3. Metadata and Rich Snippets SSR facilitates the inclusion of metadata, such as title tags, meta descriptions, and structured data directly in the initial HTML response 

Some areas SSR helps you improve in SEO 4. Mobile-First Indexing SSR can ensure that content is delivered efficiently to mobile devices, aiding in mobile-first indexing, a crucial aspect of Google's ranking algorithm. 

Some SEO tips when using SSR: 1. Title Tag (around 50-60 characters) 2. Meta Description (around 150-160 characters) 3. Heading Tags (H1, H2, etc.) to structure content hierarchically 4. Image Alt Text 5. Canonical Tag 6. Robots Meta Tag 7. Open Graph Tag 

What is Web Performance? 

What is Web Performance? Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser. It’s about making things look faster for your users. 

Some important metrics to measure for Web Performance 

Some Important metrics to measure 1. First Contentful Paint (FCP) ~ 0-1.8s How long it takes for a user to see anything on your website. 

Some Important metrics to measure 2. Largest Contentful Paint (LCP) ~ 0-2.5s How long loading it takes until the largest image or text block is rendered within the viewport 

3. Time to Interactive (TTI) ~ 0-3.8s How long it takes for a webpage to become fully interactive, allowing users to engage with various elements on the page Some Important metrics to measure 

4. Total Blocking Time (TBT) < 200ms The total duration of time between First Contentful Paint and Time to Interactive Some Important metrics to measure 

5. Cumulative Layout Shift (CLS) < 200ms Measures the visual stability of a page by evaluating the unexpected layout shifts that might occur during page load. Some Important metrics to measure 

6. First Input Delay (FID) < 100ms How long it takes when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction. To be replaced by Interaction to Next Paint (INP) Some Important metrics to measure 

7. Time to First Byte (TTFB) < 200ms How long it takes for the browser to receive the first byte of a response from the server after requesting a webpage. It indicates server responsiveness Some Important metrics to measure 

“The performance of your website is too fast” – Said no one every 

Helpful Tools for measuring Web Performance and SEO: 

Page Insights – https://pagespeed.web.dev/ 

Lighthouse – https://github.com/GoogleChrome/lighthouse Performance + SEO + Accessibility + Best Practices + SEO 

Google Search Console – https://search.google.com/search-console/about 

Moz – https://moz.com/free-seo-tools 

Some tips when using SSR: 1. Proper Component Segmentation 2. Efficient Data Fetching and Lazy Loading 3. Caching Strategies 4. Code Splitting and Bundling 5. Client-Side Rehydration: 6. Load Balancing and Scalability: 7. Server Optimization 

Thanks! Questions? @0xJamin Link to slide