Next.js Discord

Discord Forum

Error: Text content does not match server-rendered HTML.

Answered
Caribbean Elaenia posted this in #help-forum
Open in Discord
Caribbean ElaeniaOP
"use client";

import React, { useState } from "react";
import Head from "next/head";
import TopBar from "@/components/Navigation/TopBar";
import Footer from "@/components/Navigation/Footer";
import GoBackButton from "@/components/Others/GoBackButton";

export default function PageNotFound() {
  const [notFoundDescriptions] = useState([
    "Oops! It seems the page you're looking for has been spaghettified by a cosmic black hole. Try checking the URL or head back to the previous page.",
    "404 Error: This page has vanished into the void. Please check the URL or return to the previous page.",
    "Looks like you've entered a wormhole! The page you're searching for doesn't exist. Go back or try a different URL.",
    "Uh-oh! The page you're seeking has drifted away. Please verify the URL or navigate back.",
    "This page appears to have gone rogue. Double-check the URL or head back to safety.",
    "Behold! It appears you've entered a black hole of lost data. The page you seek has been devoured by the cosmos. Check the URL and try again!",
    "Warning: Your requested page has been sucked into a supernova! The explosion may have scattered it across the universe. Verify the link and see if it survived!",
    "Uh-oh! The page you're trying to reach has been obliterated by a rogue asteroid. The cosmos can be unforgiving—please double-check the URL!",
    "Caution! You've wandered into a nebula of missing pages. The one you’re searching for has either disintegrated or ventured too far into the unknown.",
    "Oops! It looks like the page you wanted has been swallowed by a space-time vortex. Time travel might help, but we recommend checking the URL instead!",
    "Attention! The page you're seeking has been ensnared by a gravitational anomaly. Its fate remains uncertain, please check the URL for accuracy!",
    "Warning: The page has ventured into the dark side of the moon and is now unreachable. Consult your cosmic map or return to safety!",
  ]);

  const getRandomDescription = () => {
    const randomIndex = Math.floor(Math.random() * notFoundDescriptions.length);
    return notFoundDescriptions[randomIndex];
  };

  return (
    <div className="flex flex-col min-h-screen">
      <Head>
        <title>NetVerse ~ Not Found</title>
      </Head>

      <TopBar username={""} avatar={""} />

      <div className="flex-grow pt-20 md:pt-24 pb-20 md:pb-24 flex flex-col items-center justify-center text-center space-y-4 md:space-y-5 px-4 md:px-10">
        <span className="bg-gradient-to-b p-2 from-purple-500 to-purple-900 text-transparent bg-clip-text font-bold text-3xl md:text-5xl">
          Page Not Found
        </span>
        <p className="text-sm md:text-base w-full md:w-1/2">
          {getRandomDescription()}
        </p>
        <GoBackButton />
      </div>

      <Footer />
    </div>
  );
}
Answered by chisto
the error happens because client components are pre-render on server, and Math.random() will be different on both sometimes, you can try using directive "client-only" instead of "use client" so the component only runs on the client
View full answer

7 Replies

Caribbean ElaeniaOP
I've tried to use SSR but the description returns undefined. Like the getServerSideProps() is not being called.
export async function getServerSideProps() {
  const randomIndex = Math.floor(Math.random() * notFoundDescriptions.length);
  const description = notFoundDescriptions[randomIndex];

  return {
    props: {
      description,
    },
  };
}
chisto
the error happens because client components are pre-render on server, and Math.random() will be different on both sometimes, you can try using directive "client-only" instead of "use client" so the component only runs on the client
Answer
Nvm, I could just remove it.
chisto
you dont really need a useState there, it can be just a const, its not like you setting the value anywhere
Caribbean ElaeniaOP
Yea