Next.js ਹੁਣ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਇੱਕ ਕੰਪੋਨੈਂਟ ਤੋਂ ਸਿੱਧੇ ਸਰਵਰ-ਓਨਲੀ (server-only) ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਫਾਰਮ ਸਬਮਿਸ਼ਨ ਵਰਗੇ ਰੋਜ਼ਾਨਾ ਕੰਮਾਂ ਲਈ ਵੱਖਰੇ API ਰੂਟ ਬਣਾਉਣ ਦੀ ਲੋੜ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਨਵੇਂ Server Actions ਫੀਚਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਇੱਕ ਸਿੰਗਲ HTML ਫਾਰਮ ਬਿਨਾਂ ਕਿਸੇ ਵਿਚਕਾਰਲੇ fetch ਕਾਲ ਦੇ ਬੈਕਐਂਡ ਕੋਡ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰ ਸਕਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਬੋਇਲਰਪਲੇਟ (boilerplate) ਘਟਦੀ ਹੈ ਅਤੇ ਫਰੰਟ-ਐਂਡ/ਬੈਕ-ਐਂਡ ਦੇ ਇਕਰਾਰਨਾਮੇ (contract) ਨੂੰ ਮਜ਼ਬੂਤ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

ਪੁਰਾਣਾ ਤਰੀਕਾ ਭਾਰੀ ਕਿਉਂ ਲੱਗਦਾ ਹੈ

ਇੱਕ ਆਮ React ਜਾਂ Next.js ਐਪ ਵਿੱਚ, ਇੱਕ ਸਧਾਰਨ "ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ" (create a project) ਫਾਰਮ ਕਦਮਾਂ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ: ਇੱਕ API ਰੂਟ ਫਾਈਲ, ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਇੱਕ fetch ਰਿਕੁਐਸਟ, ਲੋਡਿੰਗ ਅਤੇ ਐਰਰ ਸਟੇਟਸ ਨੂੰ ਸੰਭਾਲਣਾ, CORS ਹੈਡਰਜ਼, ਅਤੇ ਅੰਤ ਵਿੱਚ ਨਵੇਂ ਡੇਟਾ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਕਲਾਇੰਟ-ਸਾਈਡ ਅਪਡੇਟ। ਹਰ ਕਦਮ ਵਾਧੂ ਫਾਈਲਾਂ, ਕੋਡ ਦੀਆਂ ਲਾਈਨਾਂ ਅਤੇ ਅਸਫਲਤਾ ਦੇ ਨੁਕਤੇ (points of failure) ਜੋੜਦਾ ਹੈ। ਟੀਮਾਂ ਆਪਣਾ ਸਮਾਂ ਇਹਨਾਂ ਹਿੱਸਿਆਂ ਨੂੰ ਆਪਸ ਵਿੱਚ ਜੋੜਨ ਵਿੱਚ ਬਰਬਾਦ ਕਰਦੀਆਂ ਹਨ, ਭਾਵੇਂ ਇਕਲੌਤਾ ਟੀਚਾ ਡੇਟਾਬੇਸ ਵਿੱਚ ਇੱਕ ਰਿਕਾਰਡ ਲਿਖਣਾ ਹੀ ਕਿਉਂ ਨਾ ਹੋਵੇ।

Server Actions ਖਾਲੀ ਥਾਂ ਨੂੰ ਭਰਦੇ ਹਨ

Server Actions ਅਸਿੰਕਰੋਨਸ (asynchronous) ਫੰਕਸ਼ਨ ਹਨ ਜੋ ਗਾਰੰਟੀ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਉਹ ਸਿਰਫ਼ ਸਰਵਰ 'ਤੇ ਹੀ ਚੱਲਣਗੇ। ਫਾਈਲ ਦੇ ਉੱਪਰ "use server" ਡਾਇਰੈਕਟਿਵ ਜੋੜਨ ਨਾਲ ਕੰਪਾਈਲਰ ਨੂੰ ਇਹ ਦੱਸਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਬੰਡਲ ਤੋਂ ਬਾਹਰ ਰੱਖਿਆ ਜਾਵੇ, ਤਾਂ ਜੋ ਇਹ ਸੁਰੱਖਿਅਤ ਰੂਪ ਵਿੱਚ ਡੇਟਾਬੇਸ, ਸੀਕਰੇਟਸ (secrets), ਜਾਂ ਕਿਸੇ ਵੀ ਸਰਵਰ-ਓਨਲੀ ਸਰੋਤ ਤੱਕ ਪਹੁੰਚ ਸਕ ਸਕੇ। ਕਿਉਂਕਿ ਫੰਕਸ਼ਨ ਸਰਵਰ 'ਤੇ ਹੁੰਦਾ ਹੈ, ਕੰਪੋਨੈਂਟ ਇੱਕ ਨੇਟਿਵ <form> ਐਲੀਮੈਂਟ 'ਤੇ action ਐਟਰੀਬਿਊਟ ਰਾਹੀਂ ਇਸਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਕਾਲ ਕਰ ਸਕਦਾ ਹੈ।

ਇੱਕ ਐਕਸ਼ਨ (action) ਨੂੰ ਡਿਫਾਈਨ ਕਰਨਾ

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

ਫੰਕਸ਼ਨ ਇੱਕ FormData ਆਬਜੈਕਟ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਪੇਲੋਡ (payload) ਨੂੰ ਵੈਲੀਡੇਟ ਕਰਦਾ ਹੈ, ਡੇਟਾਬੇਸ ਵਿੱਚ ਲਿਖਦਾ ਹੈ, ਅਤੇ ਫਿਰ Next.js ਨੂੰ /dashboard ਪੇਜ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ ਤਾਂ ਜੋ UI ਪੂਰੇ ਰੀਲੋਡ ਤੋਂ ਬਿਨਾਂ ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਦਿਖਾ ਸਕੇ।

UI ਵਿੱਚ ਇਸਨੂੰ ਜੋੜਨਾ

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

ਜਦੋਂ ਯੂਜ਼ਰ ਸਬਮਿਟ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਫਾਰਮ ਡੇਟਾ ਨੂੰ ਸਰਵਰ-ਸਾਈਡ createProject ਫੰਕਸ਼ਨ ਨੂੰ ਪੋਸਟ ਕਰਦਾ ਹੈ। ਕਿਉਂਕਿ ਇਹ ਸਟੈਂਡਰਡ HTML ਫਾਰਮ ਵਿਵਹਾਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਸਬਮਿਸ਼ਨ ਉਦੋਂ ਵੀ ਕੰਮ ਕਰਦੀ ਹੈ ਜੇਕਰ JavaScript ਅਜੇ ਲੋਡ ਨਹੀਂ ਹੋਈ ਹੈ, ਜੋ ਕਿ ਹੌਲੀ ਕਨੈਕਸ਼ਨਾਂ 'ਤੇ ਪ੍ਰਦਰਸ਼ਨ (performance) ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ।

ਟੀਮਾਂ ਨੂੰ ਕੀ ਫਾਇਦਾ ਹੁੰਦਾ ਹੈ

  • ਘੱਟ ਫਾਈਲਾਂ – ਹਰੇਕ ਐਂਡਪੁਆਇੰਟ ਲਈ ਵੱਖਰੀਆਂ pages/api ਜਾਂ app/api ਫਾਈਲਾਂ ਦੀ ਲੋੜ ਨਹੀਂ।
  • ਘੱਟ ਵਾਇਰਿੰਗ – ਕੋਈ ਮੈਨੂਅਲ fetch ਕਾਲ ਨਹੀਂ, ਕੋਈ ਸਪੱਸ਼ਟ CORS ਹੈਂਡਲਿੰਗ ਨਹੀਂ।
  • ਬਿਲਟ-ਇਨ ਟਾਈਪ ਸੇਫਟੀ – ਫੰਕਸ਼ਨ ਸਿਗਨੇਚਰ ਸਰਵਰ ਅਤੇ ਕਲਾਇੰਟ ਵਿਚਕਾਰ ਸਾਂਝਾ ਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ TypeScript ਗਲਤੀਆਂ ਨੂੰ ਜਲਦੀ ਫੜ ਸਕਦਾ ਹੈ।
  • ਪਰਫਾਰਮੈਂਸ ਦਾ ਫਾਇਦਾ – ਰਿਕੁਐਸ ਸਿੱਧੇ ਸਰਵਰ ਫੰਕਸ਼ਨ ਤੱਕ ਜਾਂਦੀ ਹੈ, ਉਸ ਵਾਧੂ ਨੈੱਟਵਰਕ ਹੌਪ (network hop) ਨੂੰ ਬਚਾਉਂਦੀ ਹੈ ਜੋ ਕਿ ਕਲਾਇੰਟ-ਸਾਈਡ fetch ਨਾਲ ਪੈਦਾ ਹੁੰਦਾ।

ਸੀਮਾਵਾਂ ਅਤੇ ਸਾਵਧਾਨੀਆਂ

Server Actions ਅਜੇ ਵੀ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਫੀਚਰ ਹਨ। ਇਹ ਸਿਰਫ਼ "use server" ਨਾਲ ਮਾਰਕ ਕੀਤੇ ਅਸਿੰਕਰੋਨਸ (async) ਫੰਕਸ਼ਨ ਹੀ ਹੋ ਸਕਦੇ ਹਨ, ਅਤੇ ਉਹ ਕਲਾਇੰਟ ਨੂੰ ਮਨਮੋਗੇ JavaScript ਆਬਜੈਕਟ ਵਾਪਸ ਨਹੀਂ ਕਰ ਸਕਦੇ; ਉਹਨਾਂ ਨੂੰ ਰੀਡਾਇਰੈਕਟ (redirect), ਰੀਵੈਲੀਡੇਸ਼ਨ (revalidation), ਜਾਂ ਇੱਕ ਸਾਧਾਰਨ ਰਿਸਪਾਂਸ ਨਾਲ ਖਤਮ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਡੀਬੱਗਿੰਗ (Debugging) ਵੱਖਰੀ ਮਹਿਸੂਸ ਹੋ ਸਕਦੀ ਹੈ ਕਿਉਂਕਿ ਕਾਲ ਸਟੈਕ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਸਰਵਰ ਰਨਟਾਈਮ ਤੱਕ ਜੰਪ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਕਲਾਸਿਕ API-ਰੂਟ ਲੌਗਸ ਦੇ ਆਦੀ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਹੈਰਾਨ ਕਰ ਸਕਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਗੁੰਝਲਦਾਰ ਵਰਕਫਲੋਅ ਜਿਸ ਵਿੱਚ ਕਈ ਮਾਈਕਰੋਸਰਵਿਸਿਜ਼ ਸ਼ਾਮਲ ਹਨ ਜਾਂ ਜਿਸ ਨੂੰ ਬਾਰੀਕ HTTP ਸਟੇਟਸ ਕੋਡਾਂ ਦੀ ਲੋੜ ਹੈ, ਉਹਨਾਂ ਲਈ ਅਜੇ ਵੀ ਰਵਾਇਤੀ API ਐਂਡਪੁਆਇੰਟ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

ਕਿਸ ਚੀਜ਼ ਦਾ ਧਿਆਨ ਰੱਖਣਾ ਹੈ

Next.js ਸ਼ਾਇਦ ਆਉਣ ਵਾਲੀਆਂ ਰਿਲੀਜ਼ਾਂ ਵਿੱਚ Server Actions API ਦਾ ਵਿਸਤਾਰ ਕਰੇਗਾ, ਜਿਸ ਵਿੱਚ ਹੋਰ ਰਿਸਪਾਂਸ ਕਿਸਮਾਂ ਲਈ ਸਪੋਰਟ ਅਤੇ ਬਿਹਤਰ ਟੂਲਿੰਗ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਸ਼ਾਮਲ ਹੋਵੇਗੀ। ਮਿਸ਼ਨ-ਕ੍ਰਿਟੀਕਲ ਫੀਚਰਾਂ ਨੂੰ ਇਸ ਰਾਹ 'ਤੇ ਲਿਆਉਣ ਤੋਂ ਪਹਿਲਾਂ ਸਥਿਰਤਾ ਦਾ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣ ਲਈ ਸ਼ੁਰੂਆਤੀ ਅਪਣਾਉਣ ਵਾਲਿਆਂ ਨੂੰ ਫਰੇਮਵਰਕ ਦੇ ਚੇਂਜਲੌਗ (changelog) ਅਤੇ ਕਮਿਊਨਿਟੀ ਫੀਡਬੈਕ 'ਤੇ ਨਜ਼ਰ ਰੱਖਣੀ ਚਾਹੀਦੀ ਹੈ। ਬੰਡਲ ਸਾਈਜ਼ ਅਤੇ ਸਰਵਰ-ਰੈਂਡਰਿੰਗ ਮੈਟ੍ਰਿਕਸ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਨਾਲ ਇਹ ਵੀ ਪਤਾ ਲੱਗ ਸਕਦਾ ਹੈ ਕਿ ਕੀ ਘਟਿਆ ਹੋਇਆ ਕਲਾਇੰਟ ਕੋਡ ਤੁਹਾਡੇ ਖਾਸ ਟ੍ਰੈਫਿਕ ਪੈਟਰਨਾਂ ਲਈ ਮਾਪਣਯੋਗ ਲੇਟੈਂਸੀ (latency) ਲਾਭ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

ਨਿਚੋੜ

ਇੱਕ ਕੰਪੋਨੈਂਟ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸਰਵਰ-ਓਨਲੀ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇ ਕੇ, Next.js Server Actions ਉਸ ਵਿਚਕਾਰਲੇ ਮੀਡੀਅਮ (middleman) ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹਨ ਜਿਸ ਨੇ ਲੰਬੇ ਸਮੇਂ ਤੋਂ React ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਗੁੰਝਲਦਾਰ ਬਣਾਇਆ ਹੋਇਆ ਹੈ। ਨਤੀਜਾ ਸਾਫ਼ ਕੋਡ, ਤੇਜ਼ ਰੌਂਡ-ਟ੍ਰਿਪਸ, ਅਤੇ ਇੱਕ ਸੁਚਾਰੂ ਡਿਵੈਲਪਰ ਅਨੁਭਵ ਹੈ—ਬਸ਼ਰਤੇ ਕਿ ਫੀਚਰ ਦੀਆਂ ਮੌਜੂਦਾ ਸੀਮਾਵਾਂ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ ਦੇ ਅਨੁਕੂਲ ਹੋਣ।