Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

230
Visualizações
Global array in next.js or react js

I want to define a global array that I can set in getserverprops and use throughout the project. Is this possible in next js?

I'm going to use this array as a cache

about 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

  • You can use a global variable on the server (getServerSideProps), and
  • you also can use a global variable on the client (aka. the browser), but
  • you can not use the same global variable on the server and the client.

Server only

If you only ever want to access that variable inside getServerSideProps, then that is theoretically possible, but likely will cause all sorts of problems. E.g. consider a load balancer and 3 different server instances, which have 3 different caches.

Better would be to use some "established caching technology", like a Redis DB.

Shared values

As said, you can not share a variable between server and client.

You might (as a mental model) consider getServerSideProps to be executed in a different country on some secured server which you don't have access to, while the rest of the components (not all of them) are executed on your computer in your browser.

So if you want to share some state between client and server, you need to create an API on the server, and communicate between client and server through this API.

If you just define a global array, that array will be created and can be used, but it will be created independently on the server and on the client, i.e. they will be two completely different variable.

my-app/global.js:

export const globalVariable = {
    trace: [],
};

Then you access this variable inside the index.tsx:

my-app/pages/index.jsx:

const Home = ( props ) => {
    console.log('Client: globalVariable', globalVariable);
    console.log('Client: pageProps:', props);

    useEffect(() => {
        globalVariable.trace.push('from MyApp');
    }, []);

    return null;
}

export async function getServerSideProps() {
    globalVariable.trace.push('from getServerSideProps');
    return {
        props: {
            serverVariable: globalVariable,
        },
    }
}

Then you will have one globalVariable on the client, and a separate globalVariable on the server. You will never see "from getServerSideProps" on the client, you will never see "from MyApp" on the server.

You can pass globalVariable from the server as props, like I did with serverVariable: globalVariable, and that value will be available on the client, but it will be a third new variable on the client side. You can not hope to props.serverVariable.trace.push('pushed from client to server'), that will only push to the new client variable.

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda