How do you run server-side code only on page load?

[tunesmith]

I've tried asking this question in other places ( stackoverflow, reddit ), but unfortunately the answers so far still feel kind of hacky, and still require using getInitialProps in _app.js.

So hopefully someone has a better idea here. Using NextJS, how can one run code that:

a) only runs serverside and not client-side
b) only runs on initial page load, and not on page transitions
c) does not require using getInitialProps in _app.js

Here are some strategies that don't work:

1. getServerSideProps: This code will run only on serverside, but it is also invoked on page transitions as part of an api call that returns json

2. in App component: Assuming your parent-level App component only renders once, you can write code that won't run across page transitions since App is already mounted, however, it runs both server-side and client-side. (Correction: Even if App renders only once on a page load, it will still render on page transitions.)

3. getInitialProps in _app.js. Unfortunately, getInitialProps will run on page transitions if transitioning to a page with getServerSideProps. It will also run client-side if transitioning to a page without getServerSideProps. This can be avoided by examining request.url for the prefix /_next/data, but this feels hacky and unsupported. Besides, even after that it can be called in error scenarios. Finally (and biggest), I want to avoid getInitialProps entirely since it is not recommended, and since it turns off automatic static optimizations for other pages.

Options I haven't looked into yet:

1. in App component, behind a check to make sure it's only runs on the server side - unclear whether it will do what I need (I'll try this next). Potentially error-prone if a future developer makes App render twice.
2. Middlewares? Unclear whether they can better distinguish between page loads and page transitions
3. Server Components? Unclear how replace _app.js getInitialProps with this to support what I want

Anything else that is an option? Ideally something that is truly "the NextJS way"... it seems running "serverside app initialization" would be a common concern, at least it has come up a lot for us.

[dvelyk]

I have been stymied by this issue as well, and we're not the only ones:

• getInitialProps vs getServerProps #11211
• Skip getServerSideProps on client routing #11386
• allow shallow routing between different pages & router.isFallback with SSR #12111
• next/link still triggers SSR (getServerSideProps) when shallow prop is set to true #14855
• Is there a method that runs only once server-side on first page request? #18210
• In context, Expose information on whether a request is a client-side transition #19459
• Add option to disable getServerSideProps on client-side navigation #19611
• Conditionally calling getServerSideProps? #23642
• Allow bypass "getData" of page component on client side navigation #23921
• Isn't SPA experience very poor when using getServerSideProps? #26201
• How do I get getServerSideProps to work with Apollo cache? #28253
• Does `getServerSideProps()`run only the first time user visits the page, or is it also being executed when the user navigates to the page using `next/link`? #28782
• RFC: getInitialServerSideProps for initial SSR, leaving CSR intact #29117
• Is it possible to skip loading data from `getServerSideProps` or `getInitialProps` when change route on client? #29225
• getServerSideProps and state management #31786
• Allow skipping getInitialProps on history navigation #32234
• Defer getServerSideProps on client-side navigation #32243

I don't think I understand the use case for which getServerSideProps was originally designed. My assumption was clearly wrong about it only being called for… uh, requests that hit the server.

I can see the (separate) benefit of also being able to run code that always runs on the server, but the return value from getServerSideProps doesn't seem to be used on page transitions anyway, so it really does seem like a wasted request?

For the time being, I'm skipping data fetching in getServerSideProps with this hack:

if (req.url?.startsWith('/_next')) return { props: {} };

That speeds things up considerably on back/forward navigation, but still entails a redundant server request 😞 So this question still stands:

Using NextJS, how can one run code that:

a) only runs serverside and not client-side
b) only runs on initial page load, and not on page transitions
c) does not require using getInitialProps in _app.js [or other hacks]

[tunesmith]

For what it's worth, I've also tried exploring _middleware.ts and it doesn't look like there is a way to distinguish between a page load and a page transition, by examining the incoming request object.

I've heard that server components might be a way to handle this, but I don't know the details. Also not sure how they would reliably distinguish between page load and page transition.

[WynnLin]

Have you made any progress？I'm facing the same problem

[Gelio]

I found a hacky solution that monkey-patches SingletonRouter.router.pageLoader.loadPage to avoid fetching data from getServerSideProps and instead navigate there immediately.

• Blog article
• GitHub repo
• demo page
• CodeSandbox

This is better than the solution described in #32021 (comment) because it avoids the _next/data request altogether.