Server-Side Rendering with Next.js

Next.js offers multiple data-fetching strategies. Choosing the right one significantly impacts performance, SEO, and user experience.

getServerSideProps

Runs on every request — ideal for dynamic, user-specific, or frequently updated data:

export const getServerSideProps: GetServerSideProps = async (context) => {
  const data = await fetchFromAPI();
  return { props: { data } };
};

getStaticProps

Runs at build time — ideal for content that rarely changes:

export const getStaticProps: GetStaticProps = async () => {
  const posts = await fetchPosts();
  return { props: { posts }, revalidate: 60 };
};

When to Use Which

• getServerSideProps: authenticated pages, real-time data, personalized content
• getStaticProps: blogs, docs, marketing pages — anything cacheable
• Client-side fetch: user interactions, dashboards, data that loads after render

CORS Consideration

When using getServerSideProps, the fetch runs on the Node.js server — not the browser. This means CORS headers are irrelevant for server-side calls, and you can hit internal APIs directly without exposing them publicly.

Conclusion

Combining SSR and SSG in the same Next.js app lets you optimize each page independently — static where possible, dynamic where necessary.