Leveraging Server-side Rendering for Enhanced Web Performance and SEO

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

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> </> )

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.

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 } } }

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

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.

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.

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.

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.

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.

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

Leveraging Server-side Rendering for Enhanced W...

Leveraging Server-side Rendering for Enhanced Web Performance and SEO

More Decks by Trust Jamin

Featured

Transcript