Leveraging Server-side Rendering for Enhanced Web Performance and SEO

Server-side rendering (SSR) has gained significant popularity in modern web development due to its ability to improve web performance and enhance search engine optimization (SEO). This talk delves into the benefits of SSR and explores how it can be effectively implemented in JavaScript applications

1. Leveraging Server-side Rendering for Enhanced Web Performance and SEO By Trust Jamin
2. Trust Jamin - Software Developer and Developer Advocate - Co-founder, Community Leads Africa - Community Manager @0xJamin
3. What is Rendering in the first place?
4. 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.
5. What is Client-side Rendering (CSR)?
6. 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
8. 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 ( <> <Head> <title>Hello World from SSR Website</title> </Head> <main> <h1>All Products</h1> {data && data.map((product) => ( <div key={product.id}> <h2>{product.title}</h2> </div> ) )} </main> </> )
10. What is Server-side Rendering (SSR)?
11. 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.
13. export default function Home({ data }: {data: Product[]}) { return ( <> <Head> <title>Hello World from SSR Website</title> </Head> <main> <h1>All Products</h1> {data && data.map((product) => ( <div key={product.id}> <h2>{product.title}</h2> </div> ) )} </main> </> ) } // 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 } } }
15. Benefits of SSR: • Improved SEO: SSR helps search engine crawlers easily read and index the contents of your website
16. 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.
17. 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.
18. 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
19. 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.
20. 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.
21. 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.
22. 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.
23. What is SEO?
24. 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).
25. 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.
26. 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.
27. 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
28. 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.
29. 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
30. What is Web Performance?
31. 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.
32. Some important metrics to measure for Web Performance
33. 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.
34. 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
35. 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
36. 4. Total Blocking Time (TBT) < 200ms The total duration of time between First Contentful Paint and Time to Interactive Some Important metrics to measure
37. 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
38. 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
39. 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
40. “The performance of your website is too fast” – Said no one every
41. Helpful Tools for measuring Web Performance and SEO:
42. Page Insights – https://pagespeed.web.dev/
43. Lighthouse – https://github.com/GoogleChrome/lighthouse Performance + SEO + Accessibility + Best Practices + SEO
44. Google Search Console – https://search.google.com/search-console/about
45. Moz – https://moz.com/free-seo-tools
46. 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
47. Thanks! Questions? @0xJamin Link to slide