ReasonJun

Next.js : How to bring data in Nextjs (getServerSideProps) (SSR - Server Side Render) 본문

Frontend/Next.js

Next.js : How to bring data in Nextjs (getServerSideProps) (SSR - Server Side Render)

ReasonJun 2023. 6. 17. 02:47
728x90

 

getServerSideProps is a function that is used to fetch data from the server in Next.js. It is called on every request and the data that it returns is used to render the page. This is useful for pages that need to fetch data that changes often, such as user data or product information.

 

getServerSideProps is a function that takes two arguments:

  • req is the HTTP request object.
  • res is the HTTP response object.

The getServerSideProps function must return an object with the following properties:

  • props is an object that contains the data that will be used to render the page.
  • redirect is an object that specifies the URL to redirect the user to.

If the getServerSideProps function returns a promise, the promise will be resolved with an object that has the same properties as described above.

 

Here is an example of a getServerSideProps function:

export const getServerSideProps = async (req, res) => {
  const data = await fetch("/api/data");
  return {
    props: {
      data,
    },
  };
};

This function fetches the data from the /api/data endpoint and returns it as the props object. The props object will then be used to render the page.

 

getServerSideProps is a powerful tool that can be used to fetch data from the server and render pages dynamically. It is a great way to improve the performance and SEO of your Next.js application.

 

Here are some of the benefits of using getServerSideProps in Next.js:

  • Improved performance: Pages that use getServerSideProps are pre-rendered on the server, which can improve performance for users.
  • Better SEO: Pages that are pre-rendered on the server can be indexed by search engines, which can improve your SEO.
  • Dynamic content: getServerSideProps can be used to fetch dynamic content from the server, which can be used to personalize the user experience.

If you are developing a Next.js application, I encourage you to use getServerSideProps to fetch data from the server. It is a powerful tool that can help you improve the performance, SEO, and dynamic content of your application.

 

Even if you enter page A, go to another page, and then enter page A again, it is created again. That is, the latest data is reflected.

 

import Head from 'next/head';
import { Inter } from 'next/font/google';
import Link from 'next/link';

const inter = Inter({ subsets: ['latin'] });

export async function getServerSideProps() {
  console.log('server') 
  // The contents are displayed on the terminal, not on the client console.
  return {
    props: { time: new Date().toISOString() },
  };
}

export default function Home({ time }) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main>
        <h1>{time}</h1>
      </main>
    </>
  );
}
728x90
저작자표시

'Frontend > Next.js' 카테고리의 다른 글

Next.js : Image component  (0) 2023.06.18
Next.js : getStaticProps with revalidata (ISR)  (0) 2023.06.18
Next.js : How to bring data in Nextjs (getStaticPaths) (SSG)  (0) 2023.06.17
Next.js : How to bring data in Nextjs (getStaticProps) (SSG)  (0) 2023.06.16
Next.js : concept  (1) 2023.06.16
'Frontend/Next.js' Related Articles more
Comments