Is there a method that runs only once server-side on first page request?

[ahmadsdn]

I'm new to next.js and I'm looking for a method (similar to getServerSideProps) that runs just once on the server. getServerSideProps runs on first page request but also runs on client side navigation (with an ajax request).

The best solution I could find is to use getInitialProps and by checking ctx.req to find out if it is being executed on client retrun an empty object.

But I think it is not ideal, I may want to make some API calls that don't want the code to be exposed to the client.
Any suggestions?

[jamesmosier]

There is no mechanism within Next to do this, other than using getInitialProps as you mentioned.

If you do this then your page will not have the data it needs when you navigate to it via next/link. For example if you are on /page1 and then click a next/link to /page2, page2 will not know what data to have and will behave differently if getServerSideProps logic is not called. That is why getServerSideProps runs on the server and then makes a fetch call to get the data on the client.

I may want to make some API calls that don't want the code to be exposed to the client

There is no difference between this and rendering on the server - the data is still available to the client. There are no security issues because the client only receives the data you send it. If you don't want the client to receive some data then exclude it from being returned.

---

If you really want to do this and use getServerSideProps you could look at ctx.req.url which is different depending on server side rendering and when it is called as an API on the client.

[jamesmosier]

Oh sorry, I didn't realize you were talking about globally in your _app.js! Yeah as mentioned, there is no way to do this currently for server only code 😞

[nimeshvaghasiya]

@jamesmosier is there any way now to globally share api data (called only once per user login) from _app.tsx? I'm using next v12.2.2.

[aldabil21]

@jamesmosier is there any way now to globally share api data (called only once per user login) from _app.tsx? I'm using next v12.2.2.

If your case:

1. Does not accept to get the data client-side, and must be fetched once on server before the first render.
2. Does not accept to use getInitialProps in _app.

Then, you would have to wait for #37136

[SamirMishra27]

Since this is out now

@aldabil21 So I will just have to put the logic in app/layout.tsx file right? I'm using Next's App router and need to run a function only once first when the user visits the page. (I'm on 13.4)

[aldabil21]

Yes the root layout

[patjakubik]

Hey @asajadian - what did you end doing? I'm struggling with the exactly same problem.

[denu5]

Ah okey, I'm using the latest 10.0.5 from 1d ago 😬

[patjakubik]

I solved it with something different. I created a provider which wraps the whole app, and on the first page request - show the loader, and make API call from the client - to the server. Furthermore, I like that approach because it doesn't use getInitialProps, making it framework-agnostic, and moreover, Automatic Static Optimization is turned on 😄

The only disadvantage is that getServersideProps cannot be used if you need data that is only obtained at the stage of first page request.

[denu5]

@patryk-smc going that way was also one idea but then I was thinking that having the "navigation-structure" in ssr for seo could be better...

[stefvhuynh]

@patryk-smc that solution will send an unpopulated HTML though. it won't work if you want SEO to pick up data in your HTML.

[Yankovsky]

It seems like @denu5 hacky solution is the only one that works.
I've also noticed, that App#getInitialProps is called on server side if the page you are making client-navigation to has getServerSideProps, but at the same time App#getInitialProps is called on client side if the next page has no getServerSideProps.

[Yankovsky]

Is there a way? I can provide some examples, where such thing would be nice to have:

• I want to determine if user has a mobile device by parsing User Agent string; I want to do that on server and only once per session (before page reload)
• I want to get user's a/b group; I want to get it once from server side and then cache for user session duration.

[Yankovsky]

So guys, I've implemented something like this:

function MyApp({ Component, pageProps }: AppProps) {
  // Save these guys in refs so they will stay the same no matter what.
  const ab = useRef(pageProps.ab)
  const isLaptop = useRef(pageProps.isLaptop)

  return (
    <ABProvider ab={ab.current}>
      <IsLaptopProvider isLaptop={isLaptop.current}>
        <Component {...pageProps} />
      </IsLaptopProvider>
    </ABProvider>
  )
}

MyApp.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext)

  // Webpack will not include this in client bundle
  if (typeof window === 'undefined') {
    // Hacky check from mister @denu5
    // Ensures that the expression under this condition will be executed
    // only once on first page render.
    // If the url starts with /_next/data, that means that we have
    // a client-side navigation situation requiring some additional data
    // from getServerSideProps or getInitialProps (not sure about this one).
    if (!appContext.ctx.req?.url?.startsWith('/_next/data')) {
      // Calculate something on server side
      appProps.pageProps.isLaptop = isLaptop(appContext.ctx.req)
      appProps.pageProps.ab = abMiddleware(appContext.ctx)
    }
  }

  return { ...appProps }
}

export default MyApp

[dmwin72015]

it works ,but not look so good!

[Yankovsky]

agreed 😄

[denu5]

agreed 😄

with the new middleware concept in v12 this thing might be worth refactoring depending on what you need

https://github.com/vercel/examples/tree/main/edge-functions/ab-testing-simple

[Faisal-Manzer]

It works great.

[behzadev]

@denu5 how using a middleware could resolve the OP request?

[theodorebear]

Hey guys, I am looking for something similar, but within next-redux-wrapper.
Maybe this is along the same lines as what you need: kirill-konshin/next-redux-wrapper#436

[tannguyencse19]

My solution for firebase-admin, I only need initialized one time.

export const getStaticProps: GetStaticProps = async (
  context
) => {
  if (getApps().length === 0) initializeApp(ServerConfig); // <-- Key is here!

  getDatabase()
    .ref("/destination")
    .on(
      "value",
      (snapshot) => {
        console.log(snapshot.val());
      },
      (errorObject) => {
        console.log("The read failed: " + errorObject.name);
      }
    );

  return {
    props: {
     
      },
    },
  };
};

Not sure if multiple reinitialize cause any damage?

---

Furthermore, you can refactoring like this

export const DB = () => {
  if (getApps().length === 0) initializeApp(ServerConfig);

  return getDatabase();
};

[PredokMiF]

If we will use getInitialProps then compiler will not remove code and packages that needed on serverside. In case above, with if in getInitialProps we cant use pg fore example, cause in brouser it is useless, but it wil be placed to froduction frontend bundle.

[skywalker282]

Like Vercel team doesn't provide any support yet, we should use separate service for everythink we need to link on the server startup. So that we can lunch theme just after having launched our next app. I did it for a cron job and everything is working good now. Happy debugging