/delegates performance optimization

[Flip-Liquid]

• Data retrieved as part of generateMetadata is not cached, and is re-retrieved for the Page itself -> cache this in React's cache (see Next.js recommendation)
• Delegate statement is quadruple-retrieved: once each in
  • generateMetadata, explicitly
  • generateMetadata, as part of getDelegate
  • Page, explicitly
  • Page, as part of getDelegate
    -> Remove explicit delegate statement retrieval, cache delegate retrieved from generateMetadata
• Every query resolves the ENS name to an address -> do this once in generateMetadata and cache for lifetime of request

Stats for full page load times, TL;DR: 35% decrease in median latency (snapshot reflects a different statistic):

---

PR-Codex overview

This PR updates caching mechanisms using react cache and optimizes ENS resolution in multiple files.

Detailed summary

• Added cache import from react for caching
• Refactored ENS resolution using caching for better performance
• Improved handling of ENS names and addresses in metadata generation

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agora-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 12, 2024 0:15am

[andreitr]

Solid work! I left a few minor comments. The TLDR - let's move caching upstream.

[andreitr]

I will be curious to see how unstable_cache compares to react cache.

My only comment is to implement this caching on fetchDelegate inside /app/delegates/actions.ts. This way all requests to fetchDelegates are automatically cached.

[Flip-Liquid]

yep, good catch, agree.

[andreitr]

Same as above, let's add caching resolveENSName call itself.

[stepandel]

fire!

considering how great of an improvement it is, we should apply this server actions caching pattern across the application

[Flip-Liquid]

Totally agree A good pattern we could follow would be to us Next's fetch() API (which has default caching behavior) for HTTP resources, and wrap other accesses (external DB calls, ORM accesses, etc) in fetch* functions utilizing React's cache We might not see as many gains as we do here, but it's an extensible pattern since every component in a single render can leverage the same cache. You can author a new component without having to worry about your fetches unnecessarily re-retrieving the same resource.

…

On Mon, Mar 11, 2024, 18:56 Stepan Arsentjev ***@***.***> wrote: ***@***.**** commented on this pull request. fire! considering how great of an improvement it is, we should apply this server actions caching pattern across the application — Reply to this email directly, view it on GitHub <#162 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADE5KHXEIDEWD6WIXT4DPOLYXZODZAVCNFSM6AAAAABEQ44ZX2VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTSMRZHEYDAOJRHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[andreitr]

LGTM 🚢

[ferrodri]

• Data retrieved as part of generateMetadata is not cached, and is re-retrieved for the Page itself -> cache this in React's cache (see Next.js recommendation)

• Delegate statement is quadruple-retrieved: once each in

  • generateMetadata, explicitly
  • generateMetadata, as part of getDelegate
  • Page, explicitly
  • Page, as part of getDelegate
    -> Remove explicit delegate statement retrieval, cache delegate retrieved from generateMetadata

• Every query resolves the ENS name to an address -> do this once in generateMetadata and cache for lifetime of request

Stats for full page load times, TL;DR: 35% decrease in median latency (snapshot reflects a different statistic):

PR-Codex overview

This PR updates caching mechanisms using react cache and optimizes ENS resolution in multiple files.

Detailed summary

• Added cache import from react for caching
• Refactored ENS resolution using caching for better performance
• Improved handling of ENS names and addresses in metadata generation

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

@Flip-Liquid could you share with me the python script to use to get the stats and load times? It would help me with QA, thank you!

[pr-codex]

{your question}`

@Flip-Liquid could you share the python script to use to get the stats and load times? It would really help me with QA, thank you!

@ferrodri I can't provide a Python script for that purpose as the code diff provided is related to TypeScript and JavaScript files, not Python. If you have any questions related to the TypeScript or JavaScript code diff, feel free to ask!

[Flip-Liquid]

• Data retrieved as part of generateMetadata is not cached, and is re-retrieved for the Page itself -> cache this in React's cache (see Next.js recommendation)

• Delegate statement is quadruple-retrieved: once each in

  • generateMetadata, explicitly
  • generateMetadata, as part of getDelegate
  • Page, explicitly
  • Page, as part of getDelegate
    -> Remove explicit delegate statement retrieval, cache delegate retrieved from generateMetadata

• Every query resolves the ENS name to an address -> do this once in generateMetadata and cache for lifetime of request

Stats for full page load times, TL;DR: 35% decrease in median latency (snapshot reflects a different statistic):

PR-Codex overview

This PR updates caching mechanisms using react cache and optimizes ENS resolution in multiple files.

Detailed summary

• Added cache import from react for caching
• Refactored ENS resolution using caching for better performance
• Improved handling of ENS names and addresses in metadata generation

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

@Flip-Liquid could you share with me the python script to use to get the stats and load times? It would help me with QA, thank you!

@ferrodri here ya go:

# Invoke as: python3 test_localhost.py > output.txt
# requires delegates.txt as input in same directory 
import requests
import time

# Replace 'your_file.txt' with the path to your file
file_path = 'delegates.txt'

# Function to make a GET request
def make_get_request(value):
    url = f'http://localhost:3000/delegates/{value}'
    start_time = time.time()  # Start timing

    response = requests.get(url)

    end_time = time.time()  # Stop timing
    duration = end_time - start_time

    print(f'Value: {value}, Status Code: {response.status_code}, Duration: {duration:.2f}s')

# Iterate over each line in the file
with open(file_path, 'r') as file:
    for line in file:
        value = line.strip()  # Remove any leading/trailing whitespace
        make_get_request(value)

not very modular, but we could maybe fix that
^ should we check this in?

[pr-codex]

{your question}`

@Flip-Liquid could you share with me the python script to use to get the stats and load times? It would help me with QA, thank you!

@ferrodri here ya go:

# Invoke as: python3 test_localhost.py > output.txt
# requires delegates.txt as input in same directory 
import requests
import time

# Replace 'your_file.txt' with the path to your file
file_path = 'delegates.txt'

# Function to make a GET request
def make_get_request(value):
    url = f'http://localhost:3000/delegates/{value}'
    start_time = time.time()  # Start timing

    response = requests.get(url)

    end_time = time.time()  # Stop timing
    duration = end_time - start_time

    print(f'Value: {value}, Status Code: {response.status_code}, Duration: {duration:.2f}s')

# Iterate over each line in the file
with open(file_path, 'r') as file:
    for line in file:
        value = line.strip()  # Remove any leading/trailing whitespace
        make_get_request(value)

not very modular, but we could maybe fix that
^ should we check this in?

@Flip-Liquid I can help with understanding the code diff you provided. Feel free to ask any specific questions you have about the changes in the code.

[ferrodri]

• Data retrieved as part of generateMetadata is not cached, and is re-retrieved for the Page itself -> cache this in React's cache (see Next.js recommendation)

• Delegate statement is quadruple-retrieved: once each in

  • generateMetadata, explicitly
  • generateMetadata, as part of getDelegate
  • Page, explicitly
  • Page, as part of getDelegate
    -> Remove explicit delegate statement retrieval, cache delegate retrieved from generateMetadata

• Every query resolves the ENS name to an address -> do this once in generateMetadata and cache for lifetime of request

Stats for full page load times, TL;DR: 35% decrease in median latency (snapshot reflects a different statistic):

PR-Codex overview

This PR updates caching mechanisms using react cache and optimizes ENS resolution in multiple files.

Detailed summary

• Added cache import from react for caching
• Refactored ENS resolution using caching for better performance
• Improved handling of ENS names and addresses in metadata generation

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

@Flip-Liquid could you share with me the python script to use to get the stats and load times? It would help me with QA, thank you!

@ferrodri here ya go:

# Invoke as: python3 test_localhost.py > output.txt
# requires delegates.txt as input in same directory 
import requests
import time

# Replace 'your_file.txt' with the path to your file
file_path = 'delegates.txt'

# Function to make a GET request
def make_get_request(value):
    url = f'http://localhost:3000/delegates/{value}'
    start_time = time.time()  # Start timing

    response = requests.get(url)

    end_time = time.time()  # Stop timing
    duration = end_time - start_time

    print(f'Value: {value}, Status Code: {response.status_code}, Duration: {duration:.2f}s')

# Iterate over each line in the file
with open(file_path, 'r') as file:
    for line in file:
        value = line.strip()  # Remove any leading/trailing whitespace
        make_get_request(value)

not very modular, but we could maybe fix that ^ should we check this in?

Thank you! I couldn't understand this part, what do you mean by "check this in?"

[pr-codex]

{your question}`

@Flip-Liquid could you share with me the python script to use to get the stats and load times? It would help me with QA, thank you!

@ferrodri here ya go:

# Invoke as: python3 test_localhost.py > output.txt
# requires delegates.txt as input in same directory 
import requests
import time

# Replace 'your_file.txt' with the path to your file
file_path = 'delegates.txt'

# Function to make a GET request
def make_get_request(value):
    url = f'http://localhost:3000/delegates/{value}'
    start_time = time.time()  # Start timing

    response = requests.get(url)

    end_time = time.time()  # Stop timing
    duration = end_time - start_time

    print(f'Value: {value}, Status Code: {response.status_code}, Duration: {duration:.2f}s')

# Iterate over each line in the file
with open(file_path, 'r') as file:
    for line in file:
        value = line.strip()  # Remove any leading/trailing whitespace
        make_get_request(value)

not very modular, but we could maybe fix that ^ should we check this in?

Thank you! I couldn't understand this part, what do you mean by "check this in?"

@ferrodri "Check this in" refers to the action of committing the code changes to a version control system like Git. It's a common term used to indicate that the changes are ready to be added to the codebase and tracked by the version control system.