fetch data by useEffect in a server side rendering page

Question

I have a project with react js and next js. I am developing a dynamic page, with getStaticPaths and getStaticProps. So I am fetching most of the data in getStaticProps to make the page be rendered on server side.
But there are some data which I can't fetch on server side, because it needs token which is stored in local storage.

The question is, if I use useEffect hook to fetch those data on client side, does this all process make any advantage for SEO? Or I have to change structures, and store token in cookies to fetch all data on server side?

Update:
I want to check if user is logged in, and based on the result, show the page in different styles. But no user-related data is going to be rendered.
Right now, my code looks like this:

export default function BookDetail(props) {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  React.useEffect(() => {
    // It captures token from local storage
    const token = localStorage.getItem("token");
    // Then I need to confirm that token is valid from backend
    if (token) {
      setIsLoggedIn(true);
    }
  }, []);

  return (
    <div>
      { !isLoggedIn ? (
        {props.res.data.title}
        <br/>
        {props.res.data.description}
      ) : (
        {props.res.data.title}
        <br/>
        <button type="button" onclick={()=>{window.location.href='http://example.com';}} 
      )}
    </div>
  );
}

kingkong.js · Accepted Answer · 2023-02-06T08:30:17.217

3

If you need a token to fetch said data, that data is probably related to the user? Hence, doesn't and shouldnt be considered with SEO.

If your data is not specifically for the user. Consider making it accessable without token.

Edit based on the comments here:

Fetching data inside useEffect will absolutely affect SEO. You want to display part of a book (text) for users that are not logged in. You check if users are logged in by a request from the useEffect, this is fine and standard.

If you want to Google to be able to read your book-text with crawlers you can not fetch it in useEffect, I suggest the following:

in your getStaticProps: Fetch the data (book text) and pass it to your page. Display this information by default.

Then in your useEffect you check if the user is logged in. If they are --> remove the text and render a button instead.

This way, Google will read it as you intend, while logged in users will only see a button.

edited Feb 06 '23 at 08:30

answered Feb 05 '23 at 11:37

kingkong.js

659
4
14

Actually I want to check if user is logged in, and based on the result, show the page in different styles. But no user-related data is going to be rendered. – famdude Feb 05 '23 at 12:24
What exactly is it you want to include for SEO? – kingkong.js Feb 05 '23 at 15:57
The whole data in page. The page is going to have some data about a book which is rendered on server side, including a little parts of the book text. but if user is logged in, those parts of book text won't be displayed, instead a button to read whole book will be shown. – famdude Feb 05 '23 at 21:58
I've updated my question and added my code, could you please take a look at it? – famdude Feb 06 '23 at 07:15
What is your expected results regarding SEO? Do you want to show different versions on Google? Or do you want the text of the book to be rendered on Google? – kingkong.js Feb 06 '23 at 07:17
I want those peices of text from book to be considered on Google – famdude Feb 06 '23 at 07:20
It is possible, but doesn't really make sense. You want to display information if the user is logged in, but hide it if they are not. Yet you want to list your page on Google as if every user is logged in. Is this how you mean? I edited my answer – kingkong.js Feb 06 '23 at 07:23
I want it to show a piece of book as example to users who are not logged in, and also include it in Google, but don't show it to them if they are logged in, instead create a button for logged in users to show the whole book to them in a seperate page, which is not going to be included in Google. – famdude Feb 06 '23 at 07:26
Oh, well then just do as I wrote in my answer but opposite – kingkong.js Feb 06 '23 at 07:50
Great. So making a request on useEffect or componentdidmount doesn't hurt SEO stuff, right? – famdude Feb 06 '23 at 07:59
Yes it does! You should fetch data with getStaticProps – kingkong.js Feb 06 '23 at 08:04
I will make a more explained answer later today – kingkong.js Feb 06 '23 at 08:05
That was what I meant. like how I handled in my code, right? – famdude Feb 06 '23 at 08:42

score 0 · Answer 2 · edited Feb 06 '23 at 08:53

You can check no problem on the server side whether a user is logged in only when you use getServerSideProps - getStaticProps are executed at a built time so there is no communication with whatever user inputs into the UI simply because thats a different time frame: building the app on the server, only when the app is built user can interact with it. But getServerSideProps are not executed at a built time, yet there are still executed on the server side and since useEffect is a frontend API it won't work there. So there are two ways:

If you use NextAuth - you can use getServerSideProps and on the context object you have 'req' property and the property passed to the getSession function (you need to import that function) will tell you whether user has a session or not. Here is an example code snipet:

import { getSession } from "next-auth/react";

// some code here like your frontend component

export const getServerSideProps = async (context) => {
  const { req, res } = context;

  const session = await getSession({ req: req });

  if (!session) {
    return {
      redirect: { destination: "/", permanent: false },
    };
  }

  const email = session.user.email;

  return {
    props: { email: email, session },
  };
};

Here is more on the subject from the official next docs: https://nextjs.org/docs/authentication

If you don't use NextAuth I am sure you can attach your token to the context object like in the example above and read it in getServerSideProps except not use getSession as that is NextAuth API. haven't done it though.

I don't need the whole page to be rendered on every request. I just want the data be appeared in different ways (different styles) if user is logged in. — famdude, Feb 05 '23 at 21:54
That was only an example from my app - rendering a different page, you can do with that session whatever you need. In my case when I didn't have a session I rendered different page and when I had a session I passed the user's email in props. So in your case you case set differnt props each time and based on them style your website, sth like this: — Tom Spatula, Feb 05 '23 at 22:55
sth like this: `import { getSession } from 'next-auth/react';// some code here like your frontend component export const getServerSideProps = async (context) => { const { req, res } = context; const session = await getSession({ req: req }); if (!session) { return { props: { style: false }, }; } return { props: { style: true }, }; };` So basically what happens above i s that you sending to your app either of the props depending whether you have a session or not — Tom Spatula, Feb 05 '23 at 23:01

fetch data by useEffect in a server side rendering page

2 Answers2