Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leveraging Server-side Rendering for Enhanced W...

Trust Jamin
November 06, 2023
100

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

Trust Jamin

November 06, 2023
Tweet

Transcript

  1. Trust Jamin - Software Developer and Developer Advocate - Co-founder,

    Community Leads Africa - Community Manager @0xJamin
  2. 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.
  3. 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
  4. 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> </> )
  5. 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.
  6. 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 } } }
  7. Benefits of SSR: • Improved SEO: SSR helps search engine

    crawlers easily read and index the contents of your website
  8. 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.
  9. 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.
  10. 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
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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).
  16. 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.
  17. 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.
  18. 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
  19. 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.
  20. 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
  21. 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.
  22. 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.
  23. 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
  24. 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
  25. 4. Total Blocking Time (TBT) < 200ms The total duration

    of time between First Contentful Paint and Time to Interactive Some Important metrics to measure
  26. 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
  27. 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
  28. 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
  29. 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