SSR (Server-Side Rendering)

This page is rendered fresh on every request with personalized data.

Dynamic Data

Request Time:

2026-01-02T22:24:00.070Z

Data Timestamp:

2026-01-02T22:24:00.069Z

Random Number (changes on refresh):

699

Message:

This data was generated server-side on this request

Your User Agent:

Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

🖥️ How SSR Works

• Server renders the page on every request
• Fresh data is fetched for each user
• Perfect for personalized or frequently changing content
• Slower than static pages but always up-to-date
• Great SEO as content is in the initial HTML

Code Example

export const getServerSideProps: GetServerSideProps = async (context) => {
  // Fetch data on every request
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  
  // Access request information
  const userAgent = context.req.headers['user-agent'] || 'Unknown'

  return {
    props: {
      data,
      requestTime: new Date().toISOString(),
      userAgent,
    },
  }
}

Use Cases

✓Personalized Dashboards: User-specific data that changes frequently
✓Real-time Data: Stock prices, live scores, social feeds
✓Authentication: Pages requiring user session data
✓Dynamic Content: Content that must be fresh on every load

Trade-offs

✅ Advantages

• Always fresh data
• Access to request context
• Good for personalization
• SEO friendly

⚠️ Considerations

• Slower than static pages
• Server load increases with traffic
• Requires server infrastructure
• Higher hosting costs

Refresh this page to see the timestamp and random number change instantly!