Next.js Discord

Discord Forum

Does the layout.tsx get's rendered on every request?

Unanswered
Seppala Siberian Sleddog posted this in #help-forum
Open in Discord
Seppala Siberian SleddogOP
I'm asking on the layout.tsx file does get rendered on each request or navigation in the app directory?

17 Replies

New Guinea Freshwater Crocodile
When a user first visits your site or navigates to a new page, the layout is rendered as part of the server-side rendering (SSR) process or during static site generation (SSG), depending on your setup.
When users navigate between pages using client-side navigation (e.g., by clicking on links or buttons), the layout is re-rendered on the client side to reflect the new content.
So it rlly just depends on how you want to configure your app
@New Guinea Freshwater Crocodile When a user first visits your site or navigates to a new page, the layout is rendered as part of the server-side rendering (SSR) process or during static site generation (SSG), depending on your setup.
Seppala Siberian SleddogOP
I have a user case where I'm adding an interceptor that will intercept requests and appends the Authorization header, I have done it on the client side successfully, by using useEffect but I want to do the same on the server side when I'm doing server side data fetching but I have to reload the page in order for it to work.
New Guinea Freshwater Crocodile
Are you using fetch?
If not, you can do fetch but use custom headers in the component that gets the server side props
Seppala Siberian SleddogOP
// layout.tsx 
     <Protected redirectPath={PATHS.loginPage}>
        <ServerAuthInterceptor />
        <ClientAuthInterceptor />
        <Header>{children}</Header>
     </Protected>

const ClientAuthInterceptor = ({}) => {
  useEffect(() => {
    request.interceptors.request.use(function (config) {
      const token = localStorage.getItem('accessToken');
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    });
  }, []);
  return null;
};


const ServerAuthInterceptor = ({}) => {
  request.interceptors.request.use(function (config) {
    const token = cookies().get('accessToken');
    if (token?.value) config.headers.Authorization = `Bearer ${token.value}`;

    return config;
  });
  return null;
};
@New Guinea Freshwater Crocodile Are you using fetch?
Seppala Siberian SleddogOP
I'm using axios
New Guinea Freshwater Crocodile
Hmm, not as familiar with Axios but I think you can create an instance of axios then use that instance in a simple getServerSideProps function
Seppala Siberian SleddogOP
I exactly did that but I'm using the app directory
I tried doing that with middlewares and it didn't work
New Guinea Freshwater Crocodile
I've never had any issues when configuring them directly into the server-side functions or API routes. Have you tried that as well? Only for the server-side component tho
New Guinea Freshwater Crocodile
Okay, hold on
So assuming you have a centralized axios file
import axiosInstance from '../../lib/axios';

export async function GET(request) {
  try {
    const response = await axiosInstance.get('/data');
    return new Response(JSON.stringify(response.data), { status: 200 });
  } catch (error) {
    console.error('Error fetching data:', error);
    return new Response('Error fetching data', { status: 500 });
  }
}
Seppala Siberian SleddogOP
I kinda doing something like this but because I'm in dev server the axios instance get's recreated so I'm losing the defaults header so I'm trying to check in a build mode, what would happen
Seppala Siberian SleddogOP
// utils -> axios.ts
import axios from 'axios';

console.log('axios instance created');

const request = axios.create({
  baseURL: process.env.NEXT_PUBLIC_BACK_END_URL,
  validateStatus: () => true,
});

export default request;

I wonder why the instance get's recrated on every import?