How to pass data to a server side component in nextjs

Question

I am creating a website for dynamics blogs where i have to pass params to API URL to get a specific blog. I can't use localstorage or cookies or any client side method to block seo. So how can I pass data to a server component from a different component.

import React from 'react'

import 'bootstrap/dist/css/bootstrap.min.css'
import "../../styles/style.css"

const servicepage = async () => {
    try {
        let slug = localStorage.getItem('auth')
        let response = await fetch(`https://sankalpitsolutions.com/ecms/api/service_info.php?slug=${slug}`)
        const backendHtmlString = await response.json()
        return backendHtmlString
    } catch (error) {
        console.log(error)
    }
}

async function page(props) {
    const service = await servicepage()
    
    return (
        <>
            <div dangerouslySetInnerHTML={{ __html: service?.data?.description.replaceAll("&amp;quot;", '"').replaceAll("&amp;#39;", "'").replaceAll("amp;", "").replaceAll('&lt;', '<').replaceAll('&gt;', '>').replaceAll("&quot;", '"').replaceAll('className', 'class').replaceAll('classname', 'class').replaceAll('&amp;nbsp;', '') }}></div>
        </>
    )
}

export default page

Answer 1

So what you're trying to do is basically fetching the data on the client side and trying to pass it to the server side.

Making it simpler to understand - you try to wrap something from the client side around server component. That's not supported according to the NextJS documentation.

You most probably need to make this a Client Component that you render withing page - so you switch from importing server into client, to importing client into server (which is fine).

Create something like ServicePage.jsx:

"use client";
import { useEffect, useState } from "react";

const ServicePage = () => {
  const [backendHtmlString, setBackendHtmlString] = useState("");

  useEffect(() => {
    const fetchHtmlString = async () => {
      try {
        const slug = localStorage.getItem("auth");
        const response = await fetch(
          `https://sankalpitsolutions.com/ecms/api/service_info.php?slug=${slug}`
        );
        const result = await response.json();
        setBackendHtmlString(
          result?.data?.description
            .replaceAll(""", '"')
            .replaceAll("'", "'")
            .replaceAll("amp;", "")
            .replaceAll("&lt;", "<")
            .replaceAll("&gt;", ">")
            .replaceAll("&quot;", '"')
            .replaceAll("className", "class")
            .replaceAll("classname", "class")
            .replaceAll("&amp;nbsp;", "")
        );
      } catch (error) {
        console.log(error);
      }
    };

    fetchHtmlString();
  }, []);

  return backendHtmlString ? (
    <>
      <div
        dangerouslySetInnerHTML={{
          __html: backendHtmlString
        }}
      ></div>
    </>
  ) : null;
};

export default ServicePage;

then inside page.jsx you simply mount your ServicePage component:

import ServicePage from './ServicePage';

async function page(props) {    
    return <ServicePage />
}