Generating PDF with data pulled asynchronously

[byron-ojua]

Hello all,

I am building a logging/reporting application using Next.js 14, ./src directory, and app router. The PDF reports I am generating are supposed to show logged data I have in a database. To grab my data, I am using server actions. When attempting to render on a client-side page, I believe my PDF is rendering before my app can run useEffect to grab the data. However, after the data is collected, the PDF does not re-render. I have tried to manage this by using the concept of a "isComplete" variable, but this does not seem to help. Does anyone have any suggestions on how to get around this? I have attached snippits of my code below.

page.jsx

"use client";

...
import { PDFDownloadLink } from '@react-pdf/renderer';
import PDFFile from '@/app/components/reports/resume/Resume.jsx';
import { useState, useEffect } from 'react';
import { getSection1Docs } from '@/app/_db/srvactions/resume/Section1';

function ResumeDownloadButton(resumeData) {
  return (
    <PDFDownloadLink document={<PDFFile resumeData={resumeData} />} filename="FORM">
      {({loading}) => (loading ? <button>Loading Document...</button> : <button>Download Resume</button> )}
    </PDFDownloadLink>
  )
}

export default function Resume() {
  const [isClient, setIsClient] = useState(false);
  const [isComplete, setIsComplete] = useState(false); // State to manage completeness
  const [resumeData, setResumeData] = useState({
    section1Data: null,
    section2Data: null
  });

  useEffect(() => {
    setIsClient(true);

    getSection1Docs().then((data) => {
      setResumeData((prevState) => ({
        ...prevState,
        section1Data: data
      }));
    });
     ...
  }, []);

  useEffect(() => {
    // Check if both sections are complete
    setIsComplete(resumeData.section1Data !== null);
  }, [resumeData]);

  return (
    <main>
      <div className={styles.documentContainer}>
        <Link href={'resume/preview'} style={{textDecoration:"underline"}}>Preview Resume</Link>
        <br />

        {(isComplete) ? 
          (<ResumeDownloadButton resumeData={resumeData} />) 
          : null
        }
      </div>
      ...
    </main>
  )
}

Resume.jsx

import { Document, Page, Text } from "@react-pdf/renderer";
import Section1 from "./Section1.jsx";


export default function PDFFile(resumeData) {
  return (
    <Document>
        {<Section1 tableData={resumeData.section1Data}/>}
        <Page size="LETTER"> // This is just to check the render. This is normally the only page that reders
          <Text>Page 2</Text>
        </Page>
    ...
    </Document>
  )
};

[byron-ojua]

My bad, everyone. After some extra debugging, I realized there was a different issue giving me grief. I resolved that, and everything is working as expected.