Regarding data fetching server side

[zubair999]

Summary

I have blog page in I passed slug to another child server component and in that I call server action which fetch data and then
client side children getting data. But I passed data as string then parse at client. Please have a look and suggest and it is working ok.
No issue at all. Should I continue with this or use tan stack or swr. It gives php like feeling

My code is

`
Blog Page

import React, { Suspense } from "react";
import { DefaultLayout } from "@/components/layout/default-layout";
import { BlogDetailComponent } from "@/components/blogs/blog-detail";
import { getBlogBySlug } from "@/actions";

type Props = {
params: Promise<{ slug: string }>;
};

const BlogDetailPage = async ({ params }: Props) => {
const { slug } = await params;

return (

<Suspense
fallback={

Loading...

}
>



);
};

Blog server component

import React, { Suspense } from "react";
import { Main } from "./components/main";
import { getBlogBySlug } from "@/actions";

interface BlogDetailProps {
slug: string;
}

export const BlogDetailComponent: React.FC = async ({
slug,
}) => {
let blog: string = "";
try {
blog = await getBlogBySlug(slug);
} catch (error) {
console.log("error", error);
}

return

;
};

Blog child client side component

"use client";

import React from "react";
import { LeftComponent } from "./left-component";
import { RightComponent } from "./right-component";
import { Blog, BlogData } from "@/types";

interface ChildProps {
blog: string;
}

export const Main: React.FC = ({ blog }) => {
if (!blog) {
return

Blog not found

;
}
const blogPost: Blog = JSON.parse(blog);
if (!blogPost) {
return null;
}
return (

);
};

`

Additional information

No response

Example

No response

[adlermore]

Summary

I have blog page in I passed slug to another child server component and in that I call server action which fetch data and then client side children getting data. But I passed data as string then parse at client. Please have a look and suggest and it is working ok. No issue at all. Should I continue with this or use tan stack or swr. It gives php like feeling

My code is

` Blog Page

import React, { Suspense } from "react"; import { DefaultLayout } from "@/components/layout/default-layout"; import { BlogDetailComponent } from "@/components/blogs/blog-detail"; import { getBlogBySlug } from "@/actions";

type Props = { params: Promise<{ slug: string }>; };

const BlogDetailPage = async ({ params }: Props) => { const { slug } = await params;

return ( <Suspense fallback={

Loading...

}

);
};
Blog server component

import React, { Suspense } from "react"; import { Main } from "./components/main"; import { getBlogBySlug } from "@/actions";

interface BlogDetailProps { slug: string; }

export const BlogDetailComponent: React.FC = async ({ slug, }) => { let blog: string = ""; try { blog = await getBlogBySlug(slug); } catch (error) { console.log("error", error); }

return

;
};
Blog child client side component

"use client";

import React from "react"; import { LeftComponent } from "./left-component"; import { RightComponent } from "./right-component"; import { Blog, BlogData } from "@/types";

interface ChildProps { blog: string; }

export const Main: React.FC = ({ blog }) => { if (!blog) { return

Blog not found
;
}
const blogPost: Blog = JSON.parse(blog);
if (!blogPost) {
return null;
}
return (

);
};
`

Additional information

No response

Example

No response

HI , Here's a simple example of how you might integrate SWR into your client-side component:
`"use client";

import React from "react";
import useSWR from "swr";
import { LeftComponent } from "./left-component";
import { RightComponent } from "./right-component";
import { Blog, BlogData } from "@/types";

interface ChildProps {
slug: string;
}

export const Main: React.FC = ({ slug }) => {
const { data, error } = useSWR(/api/blog/${slug}, fetcher);

if (error) return

Error loading blog post

;
if (!data) return

Loading...

;

return (

);
};

const fetcher = (url) => fetch(url).then((res) => res.json());
`

[zubair999]

Actually I want to know if can use my approach, is it ok in nextjs, otherwise I may use tanstack or swr

[icyJoseph]

I think using server actions to get data is not the designed use case, https://react.dev/reference/rsc/use-server:

Server Functions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.

That being said, I think one issue is that, they are queued, and what not.

What's preventing you from just fetching the data from source as you SSR?