Handling User Authentication and Data Loading Issues with Next.js and Strapi
Unanswered
HEDI posted this in #help-forum
HEDIOP
Dear Next.js Community,
I’m new to the Next.js ecosystem and am currently using a Strapi backend. However, I’ve run into issues with user authentication and data handling. Specifically, when I reload the page, the Zustand state management data disappears, leaving only the JWT token. The problem is that user data retrieval and display don’t happen correctly because the page loads before the user data becomes available.
This leads to issues such as profile pictures loading with a delay or the system sometimes logging out the user because it doesn’t detect the login.
I would like to ask if anyone has experience with this kind of problem. How can I fix this issue so that user data loads before the page fully renders? If there are any tutorials or proven methods that could help address these problems, I would greatly appreciate the guidance.
Thank you in advance for your help!
(Next 14)
I’m new to the Next.js ecosystem and am currently using a Strapi backend. However, I’ve run into issues with user authentication and data handling. Specifically, when I reload the page, the Zustand state management data disappears, leaving only the JWT token. The problem is that user data retrieval and display don’t happen correctly because the page loads before the user data becomes available.
This leads to issues such as profile pictures loading with a delay or the system sometimes logging out the user because it doesn’t detect the login.
I would like to ask if anyone has experience with this kind of problem. How can I fix this issue so that user data loads before the page fully renders? If there are any tutorials or proven methods that could help address these problems, I would greatly appreciate the guidance.
Thank you in advance for your help!
(Next 14)
9 Replies
Red harvester ant
Hello @HEDI You can do serverside rendering or useEffect.
Of course have to do async/await.
This is the example of SSR
import React from 'react';
const ProfilePage = ({ user }) => {
return (
<div>
<h1>User Profile</h1>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
{/* Render other user information here */}
</div>
);
};
// Fetch user data from Strapi server-side
export async function getServerSideProps(context) {
const res = await fetch('https://your-strapi-api.com/users/1'); // Example Strapi API URL
const user = await res.json();
return {
props: {
user, // Pass user data as props to the component
},
};
}
export default ProfilePage;
import React from 'react';
const ProfilePage = ({ user }) => {
return (
<div>
<h1>User Profile</h1>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
{/* Render other user information here */}
</div>
);
};
// Fetch user data from Strapi server-side
export async function getServerSideProps(context) {
const res = await fetch('https://your-strapi-api.com/users/1'); // Example Strapi API URL
const user = await res.json();
return {
props: {
user, // Pass user data as props to the component
},
};
}
export default ProfilePage;
HEDIOP
as I tried, getServerSideProps no longer works in nextjs 14 app routing
I think a preload should be enough while I wait for the user, a spinner is the only thing that needs 'use client' for Layout, but that's a problem
I think a preload should be enough while I wait for the user, a spinner is the only thing that needs 'use client' for Layout, but that's a problem
Red harvester ant
export default async function Home({ params }: Props) {
let language = params.lang;
// let language = cookies().get('language')?.value || 'EN';
language = language.toLowerCase();
// /api/home-content
let data = await fetchHomeData(language);
let language = params.lang;
// let language = cookies().get('language')?.value || 'EN';
language = language.toLowerCase();
// /api/home-content
let data = await fetchHomeData(language);
export async function fetchHomeData(language: string) {
const res = await fetch(
const data = await res.json();
const result = data?.data?.attributes;
return result;
};
const res = await fetch(
${process.env.BASE_URL}/api/home-content?populate=deep&locale=${language}, { cache: 'no-store' })const data = await res.json();
const result = data?.data?.attributes;
return result;
};
So You can use like this
This is the alternative for getServerSideProps in Nextjs14
HEDIOP
Well, I'm very lame for this, if so, I'd like to share my basic Codbase with you and I'd appreciate it if you could complete the code so that I can get the system working, after that I'll at least understand how to use it in other places
https://github.com/H3dii/NextJsAuthCodeHelp
https://github.com/H3dii/NextJsAuthCodeHelp