ऑटो-पाइपलाइनिंग के साथ v0.dev लोड समय को 50% कम करें

समस्या

नियमित पाइपलाइन

import { kv } from '@vercel/kv';
 
const pipeline = kv.pipeline();
 
pipeline.set("foo", "bar");
pipeline.get("foo");
 
const res = await pipeline.exec();
console.log(res); // ["OK", "bar"]

पाइपलाइनों के नुकसान

ऑटो-पाइपलाइनिंग

const keys = ["key1", "key2", "key3"];
 
const values = await Promise.all(keys.map(key => kv.get(key)));

मुहावरेदार रिएक्ट सर्वर घटकों के लिए ऑटो-पाइपलाइन

async function Tweet({id}) {
 const tweet = kv.get(`tweets:${id}`)
 return <div>{tweet.text}</div>
}

{tweetIds.map(id => <Tweet id={id} />)}

यह कैसे काम करता है

private async deferExecution() {
 await Promise.resolve()
 return await Promise.resolve()
}

let activePipeline: Pipeline;
let pipelinePromises: new WeakMap<Pipeline, Promise<Array<unknown>>>();
let commandIndex: number;
 
const executeCommand = (command) => {
 activePipeline = activePipeline || createNewPipeline();
 activePipeline.addCommand(command);
 commandIndex++;
 
 const pipelinePromise = deferExecution().then(() => {
 if (!pipelinePromises.has(activePipeline) {
 const pipelinePromise = pipeline.exec();
 
 pipelinePromises.set(pipeline, pipelinePromise);
 activePipeline = null;
 commandIndex = 0
 };
 return pipelinePromises.get(activePipeline)!;
 });
 
 const result = await pipelinePromise;
 return result[commandIndex];
};

v0.dev में ऑटो-पाइपलाइनिंग