maullerz

# Based on https://steveholgado.com/nginx-for-nextjs/

# - /var/cache/nginx sets a directory to store the cached assets
# - levels=1:2 sets up a two‑level directory hierarchy as file access speed can be reduced when too many files are in a single directory
# - keys_zone=STATIC:10m defines a shared memory zone for cache keys named “STATIC” and with a size limit of 10MB (which should be more than enough unless you have thousands of files)
# - inactive=7d is the time that items will remain cached without being accessed (7 days), after which they will be removed
# - use_temp_path=off tells NGINX to write files directly to the cache directory and avoid unnecessary copying of data to a temporary storage area first
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;

upstream nextjs_upstream {

maullerz

Here’s how to make api.my-app.com available under my-app.com/api, using CloudFront or Cloudflare.

CloudFront

If both my-app.com and api.my-app.com are hosted in AWS, you can route requests to these instances using the CloudFront CDN.

Here’s what you’ll need to do:

1. Create a CloudFront distribution

maullerz

Код на React и TypeScript, который работает быстро

React

• Документация по React.memo: https://reactjs.org/docs/react-api.html#reactmemo
• Документация по useState: https://reactjs.org/docs/hooks-reference.html#usestate
• Исходный код ReactFiberBeginWork: https://github.com/facebook/react/blob/56e9feead0f91075ba0a4f725c9e4e343bca1c67/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L3219
• React.js pure render performance anti-pattern: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
• Avoiding unnecessary renders with React context: https://frontarm.com/james-k-nelson/react-context-performance/
• The Secret parts of React New Context API: https://medium.com/@koba04/a-secret-parts-of-react-new-context-api-e9506a4578aa
• Why Did You Render: https://www.npmjs.com/package/@welldone-software/why-did-you-render

maullerz

ESLint Rule - No .bind() or Arrow Functions in JSX Props

1. Standard

  <... onClick={this.handler.bind(this)} .../>

2. Arrow function

 <... onClick={() => this.handler()} .../>

maullerz

This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/

Thanks, @wesbos

Problem

• Using emmet in jsx files
• Emmet expands text when js autocomplete needed

maullerz

poweruser@bdx-cc-01:/rest/u/apps/sfk-apps-interactive$ cat /etc/nginx/sites-enabled/sfk*
server {
  listen 17100 default_server deferred;
  root /rest/u/apps/sfk-apps-interactive/current/public;
  access_log /var/log/nginx/sfk-apps-interactive-static-access.log;
  error_log /var/log/nginx/sfk-apps-interactive-errors.log;
  gzip on;
  gzip_comp_level 3;
  gzip_proxied expired no-cache no-store private auth;
  gzip_disable msie6;