Passing data to a server-side component in Next.js: a guide

Question

Passing data to a server-side component in Next.js: a guide

I am working on a website dedicated to dynamic blogs and I need to pass parameters to an API URL in order to retrieve a specific blog. However, I must ensure that the approach I take does not hinder SEO by utilizing local storage, cookies, or any other client-side method. How can I effectively transmit data from one component to a server-side component?

import React from 'react'

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

const fetchData = 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 displayPage(props) {
    const serviceData = await fetchData()

    return (
        <>
            <div dangerouslySetInnerHTML={{ __html: serviceData?.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 displayPage

javascript next.js nextjs-dynamic-routing

Answer 1

Answer №1

Essentially, your goal is to retrieve client-side data and transfer it to the server side.

To put it in simpler terms - you are attempting to encase something from the client side within a server component. According to NextJS documentation, this is not supported.

You likely need to create a Client Component that you will render within page - meaning you transition from importing server into client, to importing client into server (which is acceptable).

Start by creating 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("&amp;quot;", '"')
            .replaceAll("&amp;#39;", "'")
            .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, in page.jsx, simply mount your ServicePage component:

import ServicePage from './Servicepage';

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

Answer 2

Essentially, your goal is to retrieve client-side data and transfer it to the server side.

To put it in simpler terms - you are attempting to encase something from the client side within a server component. According to NextJS documentation, this is not supported.

You likely need to create a Client Component that you will render within page - meaning you transition from importing server into client, to importing client into server (which is acceptable).

Start by creating 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("&amp;quot;", '"')
            .replaceAll("&amp;#39;", "'")
            .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, in page.jsx, simply mount your ServicePage component:

import ServicePage from './Servicepage';

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

Passing data to a server-side component in Next.js: a guide

Answer №1

Similar questions

Managing toggles for save and edit buttons in Vue - a comprehensive guide

What is the solution for handling nested promises in Node.js?

What is the best way to pass an object into a method within a select element using Vue

What is the best way to save the content of an RFC822 message body as a String?

Several jQuery ajax requests seem to be failing due to errors in previous calls

Analyzing the differences in environment management between express and dotenv

Developing Your Own Local Variable in Angular with Custom Structural Directive ngForIn

Having difficulty receiving a response from an AJAX call within the success function

The declaration file for module 'react-scroll-to-bottom' appears to be missing

A guide on navigating through nested JSON objects with the help of async.js

A guide on invoking a Struts 2 action with a different parameter for each row in a jQuery DataTable

Adjust the height for just one md-tab

Firestore is failing to accept incoming data when the setDoc method is employed

What causes material-ui styling to flicker while moving between pages in Next.js?

The tooltip for the Google+ button stopped working

Guide on getting a website name from a URL using Javascript

Move tables by dragging and dropping them into place

The integration of Angular 6 with AngularJS components fails to load properly in a hybrid application

Alternating the tooltip icon based on the field's condition

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing