Как выделить компонент из кода React?

Question

[cazumbra]

Привет всем. Есть желание выделить часть кода нижеследующего в отдельный компонент. Не приложу ума как это сделать, если есть useState и всякие вкрапления одного кода в другой. Плохо если честно пока в этом разбираюсь. Вот целый код.

import { useState } from "react"

import Link from 'next/link'

import { getAllPosts } from '@/lib/getAllData'

export default function Blog() {

    /*loadmore*/
    const initialPostList = 2
    const incrementInitialPostList = 1;

    const [showPosts, setShowPosts] = useState(initialPostList);

    const handleLoadMore = () => {
        setShowPosts(showPosts + incrementInitialPostList)
    }

    const blogs = getAllPosts()

    return (
        <main className="flex flex-col">
            <h1 className="text-3xl font-bold">
                Мой блог
            </h1>


            <section className='py-10'>

                <div className='py-2'>
                    {blogs.slice(0, showPosts).map(blog => (
                        <Link href={'/blog/' + blog.slug} passHref key={blog.slug}>
                            <div className='py-2 flex justify-between align-middle gap-2'>
                                <div>
                                    <h3 className="text-lg font-bold">{blog.meta.title}</h3>
                                    <p className="text-gray-400">{blog.meta.description}</p>
                                </div>
                                <div className="my-auto text-gray-400">
                                    <p>{blog.meta.date}</p>
                                </div>
                            </div>
                        </Link>
                    ))}

                    {showPosts < blogs.length ? (
                        <div><button className="mainBtn loadBtn" onClick={handleLoadMore}>Больше статей</button></div>
                        ) : (
                        <div><button className="mainBtn loadBtn" disabled>Больше нет статей</button></div>
                    )}
                </div>
            </section>
        </main>
    )
}

И вот это сделать отдельным компонентом

/*loadmore*/
    const initialPostList = 2
    const incrementInitialPostList = 1;

    const [showPosts, setShowPosts] = useState(initialPostList);

    const handleLoadMore = () => {
        setShowPosts(showPosts + incrementInitialPostList)
    }

 {showPosts < blogs.length ? (
                        <div><button className="mainBtn loadBtn" onClick={handleLoadMore}>Больше статей</button></div>
                        ) : (
                        <div><button className="mainBtn loadBtn" disabled>Больше нет статей</button></div>
                    )}

То есть как-то так должно быть

'use client'
import { useState } from "react"

export default function LoadMore() {
    /*loadmore*/
    const initialPostList = 2
    const incrementInitialPostList = 1;

    const [showPosts, setShowPosts] = useState(initialPostList);

    const handleLoadMore = () => {
        setShowPosts(showPosts + incrementInitialPostList)
    }

    return (
        {showPosts < blogs.length ? (
            <div><button className="mainBtn loadBtn" onClick={handleLoadMore}>Больше статей</button></div>
            ) : (
            <div><button className="mainBtn loadBtn" disabled>Больше нет статей</button></div>
        )}
    )
}

Но так конечно не работает... нужно вытащить blogs из родителя и так далее. При этом я не могу например использовать в родителе useState, а в компоненте const blogs = getAllPosts() так как компонент должен работать на клиенте (use client), а родитель на сервере. NextJS 13 со своей серверной генерацией подкидывает проблем. Можно как то решить это или нет?

Comments

[cazumbra]

Никак?

[szQocks]

подними состояние для получение данных с сервера, то есть

Серверный компонент где ты получаешь данные запросом то есть const blogs = getAllPosts(), внутри идёт клиентский компонент со всеми useState и т.д в который ты пробрасываешь данные через props

[cazumbra]

szQocks, да так неинтересно... getAllPosts() - это отдельная функция, которая фетчит посты из mdx... в этот файл запихивать что-то другое не хочу

[szQocks]

cazumbra, ну у тебя компонент либо серверный, либо клиентский, два в одном не выйдет

[szQocks]

cazumbra, поднятия состояния - это совет из документации next 13, это не я придумал