Is it possible to hide SSR response data in Next.js 12?

[hyjoong]

Summary

I'm trying to blur out certain content in the community detail page for users who are not logged in, similar to how blurred images are displayed. The goal is to hide some parts of the page (e.g., answers) while still fetching data using SSR. However, I want to ensure that this blurred data is not visible in the HTML response within the network tab.

Is it possible to implement this kind of behavior while using SSR in the Next.js pages router (not the app router with server components)? If so, how can I achieve this?

Additional information

No response

Example

No response

[alaayasser741]

i think you should replace protected info with dummy data until user login and get real info to show it

examble

const [activeInfo, setActiveInfo] = useState("lorem ipsum dolor sit amet");
const realInfo = "This Real info is protected until user login";
const token = getCookie("token");

if (token) {
  setActiveInfo(realInfo);
} else {
  // This is a dummy data blur
  setActiveInfo('lorem ipsum dolor sit amet');
}

[hyjoong]

Thank you for your response! I see your point about blurring the content, but my main concern isn't so much about how to apply the blur effect itself. What I'm trying to achieve is this:

I want to fetch the data via SSR to retain the SEO benefits, but at the same time, ensure that users who are not logged in cannot see this data in the network tab or the HTML response. Essentially, I want the data to be hidden from non-logged-in users during the SSR process while still rendering the page content for SEO.

[alaayasser741]

you can do this with same logic create function in server side to fetch info then check if there is token then call this function and get info from server then render it in site