如何在NextJS项目中集成RDStation Forms？解决页面刷新表单消失问题

The issue occurs because the RDStation script's loading timing doesn't align with component hydration when cached. Here's a robust fix that ensures the form loads reliably on every page load, including refreshes:

Updated Code #

import { useEffect } from 'react';

// Correct type declaration for RDStationForms constructor
declare global {
  interface Window {
    RDStationForms: new (containerId: string, formId: string) => {
      createForm: () => void;
    };
  }
}

const RdStationForm = () => {
  useEffect(() => {
    const containerId = 'newsletter-sampleName-sampleId';
    const formId = 'sampleId';
    // Replace with your actual RDStation form CDN script URL
    const rdStationScriptUrl = 'https://d335luupugsy2.cloudfront.net/js/loader-scripts/your-unique-form-script.js';

    const createForm = () => {
      if (!window.RDStationForms) return;

      const container = document.getElementById(containerId);
      if (!container) return;

      // Clear existing content to avoid duplicate forms or stale elements
      container.innerHTML = '';
      // Initialize and render the RDStation form
      new window.RDStationForms(containerId, formId).createForm();
    };

    let scriptElement: HTMLScriptElement | null = null;

    if (!window.RDStationForms) {
      // Dynamically load the RDStation script if it's not already available
      scriptElement = document.createElement('script');
      scriptElement.src = rdStationScriptUrl;
      scriptElement.defer = true; // Ensure script runs after DOM is ready
      scriptElement.onload = createForm;
      scriptElement.onerror = () => console.error('Failed to load RDStation form script');
      document.body.appendChild(scriptElement);
    } else {
      // Script is already loaded, render the form immediately
      createForm();
    }

    // Cleanup function to prevent memory leaks
    return () => {
      if (scriptElement) {
        document.body.removeChild(scriptElement);
      }
      const container = document.getElementById(containerId);
      if (container) {
        container.innerHTML = '';
      }
    };
  }, []);

  return <div role="main" id="newsletter-sampleName-sampleId" />;
};

export default RdStationForm;

Key Changes & Explanations #

• Dynamic Script Loading: Instead of relying on a static script tag in your document head, we load the RDStation script dynamically within the component's useEffect. This ensures full control over when the script is loaded and when the form is initialized.
• Explicit Form Initialization: We call createForm explicitly after the script loads, even if the script is cached. This bypasses issues where the script's automatic initialization fails (e.g., when the script loads before the container element exists).
• Container Cleanup: Before creating the form, we clear the container's content to avoid duplicate forms or stale UI elements from previous loads.
• Type Safety: Updated the global Window interface to correctly type the RDStationForms constructor, improving TypeScript support.
• Error Handling: Added an onerror handler to log issues if the script fails to load.

Additional Notes #

• Replace rdStationScriptUrl with the actual CDN script URL provided by RDStation for your form.
• If you're using Next.js App Router, add the 'use client' directive at the top of the file to mark the component as client-side:

  'use client';
  import { useEffect } from 'react';
  // ... rest of the code
  

内容的提问来源于stack exchange，提问作者oyera